Vue 组件间传值

Vue 组件与组件之间的传值主要分为三种：

父组件 传值给 子组件
子组件 传值给 父组件
组件间的互相传值

1.父组件传值给子组件

通过 `props` 传值

父组件传值给子组件，主要通过组件自定义props属性来完成，通过此属性用来接收来自父组件传递的数据，props的值可以是两种，一种是字符串数组；另一种是对象，props 中声明的数据与组件data 函数return 的数据主要区别就是props 的来自父级，而data 中的是组件自己的数据，作用域是组件本身，这两种数据都可以在模板template 及计算属性computed和方法methods 中使用

父组件 parent.vue 文件

<template>
    <div class="parent-container">
        父组件传递的值：{{ msg }}
        <!-- 通过自定义属性的方式，完成父组件中的数据传递给子组件使用 -->
        <Child :msgFromParent="msg"></Child>
    </div>
</template>

<script>
import Child from "./Child.vue"

export default {
    data() {
        return {
            msg: "parent data"
        }
    },
    components: {
        Child
    }
};
</script>

<style scoped>
.parent-container {
    width: 500px;
    height: 100px;
    background-color: rgb(235, 138, 138);
    color: #fff;
    font-size: 24px;
    text-align: center;
}
</style>

子组件 Child.vue 文件

<template>
    <div class="child-container">
        接收父组件传递的值：{{ msgFromParent }}
    </div>
</template>

<script>
export default {
    // 接受父组件传递的数据
    props: ["msgFromParent"]
}
</script>

<style scoped>
</style>

2.子组件传值给父组件

通过 `$emit` 传值

Vue 中对 $emit 定义为:
vm.$emit( eventName, […args] )

参数：
{string} eventName
[...args]
触发当前实例上的事件。附加参数都会传给监听器回调

子组件传值给父组件，主要通过自定义事件$emit来完成，$emit第一个参数为自定义事件，第二个参数为要传递给父组件的值，父组件在子组件上绑定自定义事件来接收子组件传递的数据

父组件 parent.vue 文件

<template>
  <div class="parent-container">
    子组件传递的值：{{ info }}
    // 给子组件绑定自定义事件来接收子组件传递的数据
    <Child @getInfo="getData"></Child>
  </div>
</template>

<script>
import Child from "./Child.vue";

export default {
  data() {
    return {
      info: "",
    };
  },
  components: {
    Child,
  },
  methods: {
    getData(info) {
      this.info = info;
    },
  },
};
</script>

<style scoped>
</style>

子组件 Child.vue 文件

<template>
  <div class="child-container">
    子组件传递数据：{{ info }}
    // 点击向父组件传递数据
    <p><button @click="sendParent">点击向父组件传递数据</button></p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      info: "child data",
    };
  },
  methods: {
    // 子组件通过$emit触发自定义事件给父组件传值
    sendParent() {
      this.$emit("getInfo", this.info);
    },
  },
};
</script>

<style scoped>
</style>

3.组件间互相传值

Vue 中可以通过一个中间组件 (专门用于数据传递：事件中心) 完成数据的传递，如图：

事件中心.png

事件中心：vm.js

// 引入 Vue
import Vue from "vue"
// 创建一个 Vue 实例对象，专门用于生成实例
const vm = new Vue({})
// 对外暴露实例
export default vm

组件 A.vue 文件

<template>
  <div class="a-container">
    A组件向B组件传递数据：{{ msg }}
    <br />
    A组件接收B组件传递数据：{{ info }}
    <p><button @click="sendToB">点击向B组件发送数据</button></p>
  </div>
</template>

<script>
// 引入事件中心 vm
import vm from "../utils/vm.js";

export default {
  data() {
    return {
      msg: "A data",
      info: ""
    };
  },
  methods: {
    // 触发自定义事件发送数据给B组件
    sendToB() {
      vm.$emit("A-event", this.msg);
    },
    getData() {
      // 监听B-event事件是否发生
      vm.$on("B-event", (dat) => {
        this.info = dat;
      });
    },
  },
  created() {
    // 当组件实例一旦创建，监听其他组件是否给自己发送消息
    this.getData();
  },
};
</script>

<style scoped>
</style>

组件 B.vue 文件

<template>
  <div class="b-container">
    B组件向A组件传递数据：{{ info }}
    <br />
    B组件接收A组件传递数据：{{ msg }}
    <p><button @click="sendToA">点击向A组件发送数据</button></p>
  </div>
</template>

<script>
import vm from "../utils/vm.js";

export default {
  data() {
    return {
      info: "B data",
      msg: ""
    };
  },
  methods: {
    sendToA() {
      vm.$emit("B-event", this.info);
    },
    getData() {
      vm.$on("A-event", (dat) => {
        this.msg = dat;
      });
    },
  },
  created() {
    this.getData();
  },
};
</script>

<style scoped>
</style>