VUE组件通讯

Posted 2021-10-11 GHUIJS

• props(父传子[单向])

父组件parent.vue中通过自定义属性给子组件绑定数据

<son data='父组件消息'></son>

子组件son.vue中通过props接收

props:{
	data:String,
	default:''
}

•  $emit&自定义事件(只能子传父)

子组件通过$emit给父组件发消息 

this.$emit('sonMsg',this.title);

 父组件中通过自定义事件接收

<component @sonMsg='handleClick'></component>

• $emit&$on(可用于父子组件、兄弟组件、跨级组件之间通讯[可双向])

注意：

        子级组件传给长辈级组件，数据接收写在created中，

        长辈级组件传给子级组件，数据接收写在mounted中。

main.js中挂载公共vue实例

Vue.prototype.$bus = new Vue();

一组件中通过公共vue实例发起通讯 

this.$bus.$emit('sendMsg','组件一的消息')

 另一组件中接收消息

this.$bus.$on('sendMsg',msg => {
	console.log(msg)
	this.sonTitle = msg
})

• $ref(父传子)

父组件parent.vue编译模板中给子组件加上ref属性

<son ref="son"></son>

父组件parent.vue中直接通过$refs找到相应子组件修改该子组件已定义变量

this.$refs.son.title = '父组件消息'

• $children(父传子)

直接在父组件中通过$children访问子组件(我用uni-app测的，非要写两层$children[0])

this.$children[0].$children[0].title = '父组件传值'

• provide / inject API(只能长辈级组件传给子辈子组件)

长辈级组件中添加provide

provide:{
	fatherTitle:'page标题'
}

直接在子辈组件中用inject接收

inject:['fatherTitle']

• $attrs/$emit&$listeners(可跨级传值，$attrs是向内部组件传，$listeners是向上级传递)

子组件上绑定自定义属性

<list msg='我系渣渣辉'></list>

子组件内部用$attrs接收

<p>列表组件：{{$attrs}}</p>

this.$attrs

然后可以在孙组件上再次绑定，实现多层传递，孙组件使用跟子组件一样

<list-item v-bind='$attrs'></list-item>

经常用的$emit是子组件给父组件传值，父组件里用自定义属性接收

this.$emit('smsg','列表每一项')

加上$listenters是在父级组件监听，这样还可以再把信息往上传

<list-item v-on='$listeners'></list-item>

然后爷爷组件也能收到孙组件的信息了

<list @smsg='getMst' msg='我系渣渣辉'></list>