vue组件间属性传值的常用的方法和规范详解
作者：盛夏绽放
一. 父组件向子组件传值（Props）
1.规范：父组件通过属性（props）向子组件传递数据。子组件需要在props选项中声明这些属性。
2.代码演示：
（1） 父组件：
<template>
<div>
<child-component :parent-data="dataFromParent"></child-component>
</div>
</template>
<script>
import ChildComponent from './ChildComponent.vue';
export default {
components: {
ChildComponent
},
data() {
return {
dataFromParent: '这是来自父组件的数据'
};
}
};
</script>
（2） 子组件：
<template>
<div>
{{ parentData }}
</div>
</template>
<script>
export default {
props: {
parentData: String
}
};
</script>
解说：父组件使用v-bind（或简写为:）将dataFromParent属性传递给子组件。子组件通过声明props来接收这个数据，并可以在模板中使用它。
二. 子组件向父组件传值（Events）
1.规范：子组件通过发射事件（$emit）向父组件传递数据。父组件通过监听这些事件来接收数据。
2.代码演示：
（1）子组件：
<template>
<div>
<button @click="sendDataToParent">发送数据到父组件</button>
</div>
</template>
<script>
export default {
methods: {
sendDataToParent() {
this.$emit('dataToSend', '这是子组件发送的数据');
}
}
};
</script>
（2）父组件：
<template>
<div>
<child-component @dataToSend="handleDataFromChild"></child-component>
</div>
</template>
<script>
import ChildComponent from './ChildComponent.vue';
export default {
components: {
ChildComponent
},
methods: {
handleDataFromChild(data) {
console.log(data); // 输出：这是子组件发送的数据
}
}
};
</script>解说：子组件通过this.$emit触发一个事件，并传递数据。父组件通过v-on（或简写为@）监听这个事件，并在事件处理函数中接收数据。
三. 兄弟组件传值（Event Bus）
1.规范：兄弟组件可以通过一个共同的父组件或使用全局事件总线（Event Bus）来传递数据。
2.代码演示：
（1）Event Bus：
// event-bus.js import Vue from 'vue'; export const EventBus = new Vue();
（2）兄弟组件A（发送数据）：
<template>
<div>
<button @click="sendData">发送数据到兄弟组件</button>
</div>
</template>
<script>
import { EventBus } from './event-bus.js';
export default {
methods: {
sendData() {
EventBus.$emit('data-to-brother', '这是来自兄弟组件A的数据');
}
}
};
</script>（3）兄弟组件B（接收数据）：
<template>
<div>
<div>{{ dataFromBrother }}</div>
</div>
</template>
<script>
import { EventBus } from './event-bus.js';
export default {
data() {
return {
dataFromBrother: ''
};
},
created() {
EventBus.$on('data-to-brother', this.receiveData);
},
methods: {
receiveData(data) {
this.dataFromBrother = data;
}
},
beforeDestroy() {
EventBus.$off('data-to-brother', this.receiveData);
}
};
</script>3.代码讲解
这段代码是一个 Vue.js 组件的示例，它使用了 Vue 的事件总线（Event Bus）来接收来自兄弟组件的数据，并将其显示在模板中。以下是对代码的详细解释：
代码结构
模板部分 (<template>):
- 这是一个简单的 Vue 模板，包含一个 div 元素，用于显示从兄弟组件接收到的数据。
- {{ dataFromBrother }} 是 Vue 的插值语法，用于动态绑定数据。
脚本部分 (<script>):
定义了一个 Vue 组件，包含 data、created、methods 和 beforeDestroy 生命周期钩子。
代码详细解释
1.数据绑定
data() {
return {
dataFromBrother: ''
};
}
data 是 Vue 组件的选项，用于定义组件的响应式数据。
dataFromBrother 是一个字符串，用于存储从兄弟组件接收到的数据。
2. 事件监听
created() {
EventBus.$on('data-to-brother', this.receiveData);
}
created 是 Vue 的生命周期钩子，表示组件实例被创建后执行的代码。
EventBus.$on 是事件总线的监听方法，用于监听事件 'data-to-brother'。
当事件 'data-to-brother' 被触发时，调用 this.receiveData 方法。
3. 数据接收
methods: {
receiveData(data) {
this.dataFromBrother = data;
}
}
methods 是 Vue 组件的选项，用于定义组件的方法。
receiveData 是一个方法，接收一个参数 data，并将该数据赋值给 dataFromBrother。
4. 事件解绑
beforeDestroy() {
EventBus.$off('data-to-brother', this.receiveData);
}
beforeDestroy 是 Vue 的生命周期钩子，表示组件销毁之前执行的代码。
EventBus.$off 是事件总线的解绑方法，用于移除事件 'data-to-brother' 的监听器。
这一步非常重要，避免内存泄漏和不必要的事件触发。
事件总线（Event Bus）
事件总线是一种在 Vue 组件之间通信的方式，适用于兄弟组件之间的通信。它通过一个共享的事件中心来触发和监听事件。
事件总线的定义
在 event-bus.js 文件中，通常会这样定义事件总线：
import Vue from 'vue'; export const EventBus = new Vue();
这里创建了一个新的 Vue 实例作为事件总线。
使用场景
假设有一个兄弟组件，它通过事件总线发送数据：
// 兄弟组件
import { EventBus } from './event-bus.js';
export default {
methods: {
sendData() {
const dataToSend = 'Hello from brother component';
EventBus.$emit('data-to-brother', dataToSend);
}
}
};
当 sendData 方法被调用时，它通过事件总线触发 'data-to-brother' 事件，并传递数据。
总结
这段代码展示了如何使用 Vue 的事件总线在兄弟组件之间通信。通过监听和触发事件，组件可以共享数据，而不需要直接的父子关系。
四. 跨级组件传值（Provide/Inject）
1.规范：祖先组件可以使用provide选项提供数据，而子孙组件可以使用inject选项注入这些数据。
2.代码演示：
（1）祖先组件：
<template>
<div>
<descendant-component />
</div>
</template>
<script>
import DescendantComponent from './DescendantComponent.vue';
export default {
components: {
DescendantComponent
},
provide() {
return {
crossLevelData: '这是跨级传递的数据'
};
}
};
</script>（2）子孙组件：
<template>
<div>
{{ crossLevelData }}
</div>
</template>
<script>
export default {
inject: ['crossLevelData']
};
</script>
解说：祖先组件通过provide提供数据，子孙组件通过inject注入这些数据。这种方法适用于跨越多个层级的组件通信。
这些是在Vue CLI项目中常用的组件间属性传值的方法和规范。每种方法都有其适用场景，开发者可以根据具体需求选择最合适的传值方式。
以上就是vue组件间属性传值的常用的方法和规范详解的详细内容，更多关于vue组件属性传值的资料请关注脚本之家其它相关文章！