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)

原文地址:https://www.cnblogs.com/JSWBK/p/7891623.html