vue父子兄传值理解

父传子

总结：引入、注册、调用、传值，子组件props接收

1. 引入子组件

 import son from "./son.vue";

2. components中注册子组件

components: {
    son,
  }

3. 使用子组件并且将数据传递给子组件

 <son :myname="mySonName"></son>

4. 子组件接收数据，接收方法2种

props：['myname']

props: {
    myname: {
      type: String,
      required: true,
    },
  },

子传父

总结：子组件通过事件操作 使用$emit传递数据
5. 子组件定义绑定按钮，绑定点击事件

<button @click="tellFather">点我传给父组件</button>

6. 子组件使用this.$emit(‘自定义事件类型’，需要传递的数据) 将数据传给父组件

tellFather() {
      this.$emit("tellToFather", this.mygfName);
    },

7. 父组件监听事件，接收数据
   注意：监听的方法必须和子组件的命名相同

  <son @tellToFather="handler"></son>

兄弟传值

总结：兄弟之间无法直接传值，可以通事件总线方法传递 （以下方法就是事件总线）

1. 需将所有兄弟组件嵌套入父组件处，操作走第一大步（引入，注册，调用）
2. 创建公共vue实例，并引入（由于this指向问题，需要创建一个公共vue实例来实现事件发出的监听问题） 创建一个js文件放下面的代码 在两个子组件中都要引入这个文件 常规命名为：eventBus.js 引入的时候命名为bus，所以下面使用的是bus.$on

	import Vue from "vue";
	export default new Vue();

3. son组件创建按钮绑定点击事件，将数据传递出去

<button @click="tellBorder">点我传给border</button>

  methods: {
    tellBorder() {
      bus.$emit("tellToborder", this.mygfName);
    },
  },

5. border组件中在mounted中进行监听事件（因为不知道事件什么时候触发，所以需要界面渲染就开始监听，使用bus.$on）

 mounted() {
    bus.$on("tellToborder", (data) => {
      this.sonGFname = data;
    });
  },