vue父传子、子传父、兄弟组件之间传值如何实现？

1、父传子：

在子组件标签上绑定自定义属性名toChildVal,属性值为父组件需要传递的数据val;
子组件内部通过props接受自定义属性名toChildVal
输入框输入传值

父组件代码如下：

<template>
  <div>
    <input type="text" v-model="val">
    <childA :toChildVal="val" style="margin-top:20px"></childA>
  </div>
</template>
<script>
import childA from "@/components/childA";
export default {
  name: "parent",
  components: {
    childA,
  },
  data() {
    return {
      val: "",
    };
  },
};
</script>
<style lang="">
</style>

子组件代码如下：

<template>
  <div>
    {{toChildVal}}
  </div>
</template>
<script>
export default {
  name: "childA",
  props: {
    toChildVal: {
      //对象形式接收  =>推荐使用此方式，直接可以通过this.toChildVal取值
      type: String, //设置数据类型
      default: "", //数据默认值
    },
  },
};
</script>
<style lang="">
</style>

---

2、子传父：

在子组件methods中通过this.$emit提交自定义事件
在子组件标签上绑定这个自定义事件,之后通过自定义事件的入参msg接收参数
输入框输入值，点击后方按钮传值

子组件代码如下：

<template>
  <div>
    <input type="text" v-model="val">
    <button @click="tap">点击传入父组件</button>
  </div>
</template>
<script>
export default {
  name: "childA",
  data() {
    return {
      val: "",
    };
  },
  methods: {
    tap() {
      //goParent是自定义事件，this.val是子传父需要传的值
      this.$emit("goParent", this.val);
    },
  },
};
</script>
<style lang="">
</style>

父组件代码如下：

<template>
  <div>
    <!-- goParent是子组件内的自定义事件 -->
    <childA style="margin-top:20px" @goParent="parentEvent"></childA>
    <div>
      子传父的值:{{iptVal}}
    </div>
  </div>
</template>
<script>
import childA from "@/components/childA";
export default {
  name: "parent",
  components: {
    childA,
  },
  data() {
    return {
      iptVal: "",
    };
  },
  methods: {
    parentEvent(msg) {
      //msg接收子组件传来的值
      this.iptVal = msg;
    },
  },
};
</script>
<style lang="">
</style>

---

3、兄弟组件传值：

新建bus.js,新建空的vue对象，导出空对象

A，B组件导入bus.js,组件A通过bus.$emit(“xxx”,val)推送数据

组件B通过bus.$on接收数据
输入框输入值，点击后方按钮传值

步骤如下所示：
第一步：
在src目录下新建utils文件夹，在这个文件夹下新建Bus.js文件
Bus.js代码如下：

import Vue from "vue"
const Bus = new Vue({})
export default Bus;

第二步：在父组件内分别引入childA组件和childB组件
代码如下：

<template>
  <div>
    <childA style="margin-top:20px"></childA>
    <childB style="margin-top:20px"></childB>

  </div>
</template>
<script>
import childA from "@/components/childA";
import childB from "@/components/childB";
export default {
  name: "parent",
  components: {
    childA,
    childB,
  },
};
</script>
<style lang="">
</style>

第三步：编写childA代码，如下：

<template>
  <div>
    <input type="text" v-model="val">
    <button @click="tap">点击传入兄弟组件</button>
  </div>
</template>
<script>
import Bus from "@/utils/Bus";
export default {
  name: "childA",
  data() {
    return {
      val: "",
    };
  },
  methods: {
    tap() {
      //goBorther是自定义事件
      Bus.$emit("goBorther", this.val);
    },
  },
};
</script>
<style lang="">
</style>

第四步：编写childB代码如下：

<template>
  <div>
    接收到的兄弟组件值：{{val}}
  </div>
</template>
<script>
import Bus from "@/utils/Bus";
export default {
  name: "childB",
  data() {
    return {
      val: "",
    };
  },
  mounted() {
    //goBorther是兄弟组件内的自定义事件，msg就是接收到的值
    Bus.$on("goBorther", (msg) => {
      this.val = msg;
    });
  },
};
</script>
<style lang="">
</style>

end！！！