浅谈兄弟之间传值

2022-05-22 152 阅读1分钟

本文已参与「新人创作礼」活动, 一起开启掘金创作之路。

Vue 兄弟之间传值

这个只是程序员之间创建出来的下面就是具体的使用方法:
父组件当中导入使用两个组件

<template>
  <div>
    // 使用
    <eldest/>
    <twin/>
  </div>
</template>
// 导入
import eldest from './components/eldest.vue'
import twin from './components/twin.vue'
export default 
  name: 'BrotherApp',
  // 注册
  components : {
    eldest,
    twin
  },

新建立一个名为 bus.js 的文件

import Vue from 'vue'
// 导入导出
export default new Vue

点击事件触发传值:

// 点击事件
<button @click="foo">点我传值</button>
// 导入 bus.js 文件
import bus from '../assets/bas/bas'
methods: {
    foo() {
        // 通过 点击事件 $emit 传值过去 toFooter 与接收方对应, 后面的jiu'shi
        bus.$emit('toFooter', this.age)
    }
}

对应的子组件接收:

<template>
    <div>
        // 插值显示结果
        {{str}}
    </div>
</template>
导入 bus.js 
import bus from '../assets/bas/bas'

data() {
    return {
      // 定义一个空值用于接收数据
        str: ''
    };
},

mounted() {
    // 通过 $on 接收 使用箭头函数 this. 指向组件 参数就是需要接收的值
    bas.$on('toFooter', (data) => {
        this.str = data
    })
},