vue组件间通信
Posted yancyzheng
tags:
篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了vue组件间通信相关的知识,希望对你有一定的参考价值。
组件间通信
vue组件之间的通信方式包括父子通信、子父通信和非父子通信
父子间通信
<!-- 在父组件中使用子组件 -->
<!-- 在父组件中向子组件传递数据,需要在子组件上面添加属性,使其值等于要传递的数据 -->
<Child :childData="childData"></Child>
// 父组件
// 引入子组件
import Child from './Child'
export default
// 注册子组件
components: Child,
data ()
return
childData: '父组件中的数据'
// 子组件
// 子组件接受父组件以属性方式传递过来的值,需要使用props进行接受
export default
// childData即为在父组件中给子组件添加的属性名,值为数据类型,props中接受的数据等同于data中的数据,可以直接使用,且不能和data中的变量名相同
props:
childData: String
子父间通信
- 通过发布者-监听着的方式进行子父间数据通信
<!-- 子组件 -->
<button @click="sendParent">向父组件传递数据</button>
// 子组件
export default
methods:
sendParent ()
this.$emit("send:message", "要传递的数据")
<!-- 父组件 -->
<!-- 可接收子组件传递的数据 -->
<Child @send:message="sendMessage"></Child>
import Child from './Child'
export default
methods:
sendMessage (data)
console.log(data)
非父子通信
- 以Vue实例作为中央时间主线
<!-- 新建一个bus.js -->
import Vue from 'vue'
export default new Vue()
import bus from '../../bus
// 发送组件
bus.$emit('send:menu', true)
import bus from '../../bus
// 接收组件
bus.$on('send:menu', (msg) =>
if (msg)
console.log("接收数据成功")
)
以上是关于vue组件间通信的主要内容,如果未能解决你的问题,请参考以下文章