Vue父子组件间通信（数据传递）

Posted 2023-03-15

参考技术A

父---props--->子
子---props/自定义事件/全局事件总线/消息订阅与发布--->父
任意组件间通信：/自定义事件/全局事件总线/消息订阅与发布/Vuex/路由传参

父组件传递：在使用子组件时，使用 v-bind：自定义接收名称="要传递的数据"
子组件接收： props:["自定义接收名称"]

父组件传递： v-on:自定义接收名称="要传递的方法"
子组件接收时自定义一个方法，在方法中触发父组件传递的方法： this.$emit("自定义接收名称")

在父组件向子组件 传递方法 的基础上，给方法 增加参数 ，
也就是在子组件中触发父组件的方法时： this.$emit("自定义接收名称"，需传递的数据) ，父组件中的方法也增加参数接收数据即可。

在父组件中使用子组件时，增加 ref属性并指定ref的名称 ，然后在调用方法的地方使用 this.refs.ref的名称.需调用的子组件方法名() 即可调用。
e.g.

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("接收数据成功")
  
)