父子通信
props配置项 父向子通信
@自定义事件 子向父通信
作用域插槽 子向父通信
通过ref来给标签打标识,然后在父组件中直接使用this.$refs.xxx 来获取子组件中的标签,然后在子组件中为标签绑定相应事件,通过在父组件中执行标签事件(如:this.$refs.inputDom.focus()),并传递相应参数,便可以实现父向子传值。同理,用返回值接受函数执行的结果,也是可以实现子向父传值的。
$parent 属性,在子组件中可以直接访问该组件的父实例或组件。 (特别注意:第三方组件库中的$parent可能仍然是一个第三方组件!可以通过 $parent的$el属性在控制台中看到 )
$root 属性,获取根组件对象,一般都是App.vue。
$children 属性,获取所有子组件的数组,注意:子组件消失与出现可能会改变其他子组件的下标!
通过这3个属性,可以很方便的进行父子间通信,同时也可以实现子组件对父组件数据的修改,但是这样做可能会引起后续维护上的困难,一般不推荐使用。
provide/inject : 依赖注入,对于祖先组件对子组件传值,可以使用 provide 和 inject,正常inject是无法修改的,但是我们可以把传递的数据改为引用值,或把祖先组件的vc对象(即this指向的对象)直接传给子组件。
这个方法对于多个子组件控制祖先组件弹出层的开启/关闭、传递标题信息十分方便
v-model 父子组件通信
//--------父组件
<template>
<div>
<!-- 在父组件中对子组件使用用v-model相当于,v-bind绑定了value,以及执行了v-on:input事件 -->
<childv-model="flag"></child>
<div>{{flag}}</div>
</div>
</template>
//--------子组件
<script>
exportdefault {
// 用props接收父组件传递的value值,从而实现双向数据绑定
props: ["value"],
methods: {
// 通过$emit触发父组件的input事件,并将第二个参数作为值传递给父组件
confirm () {
this.$emit('input', false)
}
}
}
</script>
非父子通信
并不是说一定要是非父子才行,而是指父子组件或非父子组件,都可以通过这些方式进行通信。
事件总线
1. 设置全局可用的事件总线
// main.js
newVue({
beforeCreate() {
Vue.prototype.$bus=this
},
render: h=>h(App)
}).$mount('#app')
2. 为接收方绑定接收事件
<script>
// 接收方 mounted声明周期钩子中:
mounted() {
// Bus-1 是监听的事件名 msg是发送方传递的参数
this.$bus.$on('Bus-1', (msg) => {
console.log(msg)
})
}
</script>
3. 为发送方绑定发送事件
<script>
// 发送方 这里是绑定在了一个button的click事件上
methods: {
// sendMsg 是btn点击事件的回调函数
sendMsg() {
// Bus-1 是触发的事件名 后面是传递的信息
this.$bus.$emit('Bus-1', '发送的信息:我是userInfo')
}
}
</script>
虽然很遗憾,但是事件总线在Vue3中被删除了,Vue3删除了$on 、$off 和 $once 方法 ,开发团队推荐我们使用第三方库来实现组件通信。
2.第三方库实现组件通信
可以实现组件通信的第三方库有很多,这里以 pubsub.js 举例。
安装pubsub
npm i pubsub-js
在main.js中全局引入pubsub
import PubSub from 'pubsub-js'
接收方订阅消息
mounted() {
// 第一个 pubsub-1 是订阅的消息名
PubSub.subscribe('pubsub-1', (subName, msg) => {
console.log(subName) // pubsub-1 这个是回调函数的消息名 默认第一个参数
console.log(msg) // 这个才是接收的数据!
})
}
`重点强调:接收方使用 subscribe 方法接收消息,回调函数的第一个参数都是消息名`
发送方发布消息
methods: {
// sendMsg 是btn按钮点击事件触发的回调函数
sendMsg() {
// 发布消息:pubsub-1是发布的消息名 和接收方订阅的消息名必须一致!
PubSub.publish('pubsub-1', '我是传递的数据:Hello')
}
}
3.Vuex通信
通过state传递公共数据