- 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