vue 之组件笔记

一.组件的创建

 需求 ：在shop.vue组件中使用shopList组件

1.创建shopList.vue组件

2.在shop.vue中导入shopList组件

    import shopList from "./shopList.vue"

 

3.定义组件

   

export default {

data () {

   return {

   msg: ''

   }

},

components:{

shopList:shopList

}

 

}

 

4.在需要用到的组件的地方使用模板

<div class="navList">

<shopList></shopList>

</div>

 

这就完成了

 

二、父子组件传值

1.在父子组件中，通过pass props 传值 

 

<shopList componentID='1111'></shopList>

2.在子组件中接收

  

export default {

data () {

      return {

      msg: ''

     }

},

props:["componentID"]

}

3.可以通过插值表达式在页面中校验

   

{{componentID}}