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>
