vue组件间的传值

• 1.props和$emit
  • 父组件向子组件传递数据是通过prop传递的，子组件传递数据给父组件是通过$emit触发事件来做到的。
• 2.特性绑定$attrs和$listeners
  • 如果父组件A下面有子组件B，组件B下面有组件C,这时如果组件A想传递数据给组件C怎么办呢？ 如果继续用上面的方法，会变得非常复杂，不利于维护；Vue 2.4开始提供了$attrs和$listeners来解决这个问题，能够让组件A之间传递消息给组件C。
• 3.中央事件总线 Events Bus
  • 新建一个Vue事件bus对象，然后通过bus.$emit触发事件，bus.$on监听触发的事件。
• 4.依赖注入：provide和inject
  • 父组件中通过provider来提供变量，然后在子组件中通过inject来注入变量。
  • 不论子组件有多深，只要调用了inject那么就可以注入provider中的数据。而不是局限于只能从当前父组件的prop属性来获取数据，只要在父组件的生命周期内，子组件都可以调用。

// 父组件
name: "Parent",
provide: {
for: "demo"
},
components:{
childOne
}
// 子组件
name: "childOne",
inject: ['for'],
data() {
return {
  demo: this.for
}
},
components: {
childtwo
}

 

• 5.v-model
  • 父组件通过v-model传递值给子组件时，会自动传递一个value的prop属性，在子组件中通过this.$emit(‘input’,val)自动修改v-model绑定的值
• 子组件引用：ref和$refs
• 7.父链和子索引：$parent和$children
• 8.vue1中boradcast和dispatch
  • vue1.0中提供了这种方式，但vue2.0中没有，但很多开源软件都自己封装了这种方式，比如min ui、element ui和iview等。
• 9.vuex