Vue组件之间简单的数据传递

1.父组件向子组件传递数据

使用 props 传递

有关 props 详细内容参考我的另一篇Vue中的 props 属性_游小北的博客-CSDN博客

在父组件中定义 data ，在 template 中使用 v-bind 传递

父组件：

<template>
  <div>
    <text1 :name="username" :brith="2002" :age="20"></text1>
  </div>
</template>

data () {
        return {
          username: '张三'
        }
      }

子组件：

props: {
        'name': {
            type: String,
            
            required: true
        },
        'brith': {
            type: Number
        },
        'age': {
            type: Number
        }
    },

2.子组件向父组件传递数据

使用 $emit () 

$emit( ' 自定义事件名 ' ，需要传的值)

子组件的操作：

        第一步：子组件绑定事件 changeName

<button @click="changeName">修改姓名</button>

        第二步：子组件设置 changeName 中 $emit 函数 

 methods: {
        changeName() {
            this.name = '张学友'
            this.$emit('transName',this.name)
        }
    },

先修改姓名为 ‘ 张学友 ’ ，再通过 $emit () 传递数据，‘ transName ’ 是自定义事件名，可自行命名，这是发送函数，那么接收函数？

父组件的操作：

        第一步：父组件设置绑定 子组件中设置的自定义事件 ‘ transName ’，并且设置方法名‘ getName’

 <text1 @transName="getName"> {{name}} </text1>

        第二步：父组件设置接受方法 getName ()：把子组件的值传入形参 val ，再赋值给 this.name，再渲染到 {{ name }} 中。

 methods: {
        getName(val) {
          this.name = val
        }
      }

3.兄弟之间数据传输

可使用 Vue bus 进行数据传输（ bus 可用于任何组件传值 ）

父子组件之间的通信vue提供了更直接的方式，此处不细说，不会的可以去官网研读文档。但是官方没有提供直接的方法用于兄弟组件之间的传值以及相关的逻辑处理。因此就有了vue-bus和vuex.

vue-bus可用于不是特别复杂的项目中任意组件的传值问题。vuex不仅能实现组件之间通信的问题还提供了相应的逻辑处理方法。但是也更为庞大，所以一般简单的传值问题可用于vue-bus解决
————————————————
版权声明：本文为CSDN博主「小白菜地里黄」的原创文章

1. 创建 bus.js 文件

 在 bus.js 文件中写入如下内容：

// 导入 vue 文件内容
import Vue from 'vue'

const Bus = new Vue()
    
export default Bus

2. 在要传值的组件 text1.vue 中导入 bus，并使用 Bus.$emit () 传值

methods: {
       BusTo() {
           Bus.$emit('newName',this.name)
       }
    }

3. 在需要接收的组件 text2.vue 也要导入 bus，并使用 Bus.$on () 接受并执行操作（控制台输出、赋值等）

图示：

 效果如下：