vue 实现爷孙组件的数据通信


$attrs的使用:

  1. 在爷组件(index.vue)中,类似props传值,将需要传递的值绑定在父组件上。

  2. 在父组件中,也是类似props传值,但是这里传递的就不是值了,而是$attrs。

  3. 在孙组件中,接收props,这样就可以在孙组件中使用这个数据了。

  (需要注意的是父组件中不需要接收props,只要在孙组件中接收就可以。)

//index.vue:


//Father.vue:


//son.vue:


$listeners的使用:

  1. 在爷组件(index.vue)中,绑定事件。

  2. 在父组件中,也是类似绑定事件,但是这里绑定的不是具体的事件,而是v-on="$listeners"

  3. 在孙组件中,需要的时候触发($emit)这个事件即可。

//index.vue:


//Father.vue:


//son.vue:


vue