vue组件通信（props,$emit,$attrs,$listeners）

朝颜陌

 

vue基础----组件通信（props,$emit,$attrs,$listeners）

一、父传子，子传孙

　　1. props

　　　　1>在父组件中通过子组件自定义的标签属性来传递数据。

　　　　2>在子组件中通过props声明希望用到的数据

 1 
 2     

 3         
 4     
 5     
 6     
49 
50 

1.1这里需要注意的props 除了上述这种写法，还可以写成对象形式，来校验数据

 1 props: {
 2 a: {
 3     type: Number,
 4     default: 10
 5 },
 6 b: {
 7     type: String,
 8     validator(val) {
 9         return val>0; // "2">0
10     }
11 },
12 arr: {
13     type: Array,
14     //假如属性是数组或对象 默认值需要通过函数返回
15     default:()=>([1])
16 }
17 },

2.有时候my-father这块用不到数据，但需要把爷爷的数据传给孙子，可以用$attrs,在 my-son v-bind="$attrs"

this.$attrs 对没有使用的属性保留在this.$attrs (也就是props中没有申明的属性)

 1 
 2     

 3         
 4     
 5     
 6     
40 

二、点击子组件，调用父组件的方法 (想在父组件中绑定原生事件给组件)

1.需要添加修饰符native,不添加就被当作一个属性对待

 1 
 2     

 3         
 4         
 5     
 6     
 7     
25 

点击 “点我” 的时候父组件的fn函数被调用。

2.$listeners 绑定所有的方法，直接调用父组件的方法

 1 
 2     

 3         
 4         
 5     
 6     
 7     
26 

3.子组件想调用父组件的方法 $emit

  1> 在子组件中调用$emit()方法发布一个事件

  2> 在父组件中提供一个在子组件内部发布的事件处理函数

  3> 在父组件订阅子组件内部发布的事件

 1 
 2     

 3         
 4         
 5         
 6     
 7     
 8     
43 

 来源：https://www.cnblogs.com/moon-yyl/p/11613787.html