- 父组件 传值给 子组件
- 子组件 传值给 父组件
- 组件 间的互相传值
父组件传值给子组件，主要通过组件自定义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>
