vue使用(三)----------父子组件的使用
父组件和子组件的区分
使用组件者为父,被使用组件者为子
父需要声明子组件,引入子组件对象,声明方式如下
import 子组件对象 form './xxx.vue';
{
components:{
组件名:子组件对象
}
}
全局组件,使用更为方便,不需要声明,直接使用
在main.js中引入一次 声明全局组件:'vue.component('组件名',组件对象);'
父子组件之间的传信
------父传子
父组件通过子组件的属性将值进行传递
---方式有2种:
+常量:prop1="常量值"
+变量::prop2="变量名"
子组件需要声明
-根属性props:['prop1','prop2']
-在页面中直接使用{{prop1}}
-在js中应该如何使用prop1? this.prop1获取
------子传父 $on $emit
父组件通过 new Vue()这样的一个对象,来$on('事件名',fn(prop1,prop2))
子组件引入同一个vuebus,来$emit('事件名',prop1,prop2)