一.组件的创建
需求 :在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}}