在 Vue.js 中，组件之间的通信是一个常见的需求。Vue 提供了多种方式来实现组件之间的数据传递和通信，适用于不同的场景。以下是常见的 Vue 组件间通信方式：
props）props 是父组件向子组件传递数据的最常用方式。子组件通过声明 props 接收父组件传递的数据。
示例：
vue<!-- 父组件 --> <template> <child-component :message="parentMessage"></child-component> </template> <script> export default { data() { return { parentMessage: 'Hello from parent' }; } } </script> <!-- 子组件 --> <template> <div>{{ message }}</div> </template> <script> export default { props: ['message'] } </script>
$emit）$emit 是子组件向父组件传递数据的常用方式，子组件通过 this.$emit('eventName', data) 触发自定义事件，父组件监听该事件并处理传递的数据。
示例：
vue<!-- 父组件 --> <template> <child-component @childEvent="handleChildEvent"></child-component> </template> <script> export default { methods: { handleChildEvent(data) { console.log('Received from child:', data); } } } </script> <!-- 子组件 --> <template> <button @click="sendData">Click me</button> </template> <script> export default { methods: { sendData() { this.$emit('childEvent', 'Hello from child'); } } } </script>
通过父组件将数据从一个子组件传递到另一个子组件。子组件 A 通过 emit 事件通知父组件，父组件再通过 props 将数据传递给子组件 B。
示例：
vue<!-- 父组件 --> <template> <child-a @messageToB="sendMessageToB"></child-a> <child-b :message="messageForB"></child-b> </template> <script> export default { data() { return { messageForB: '' }; }, methods: { sendMessageToB(message) { this.messageForB = message; } } } </script>
provide 和 inject 是 Vue 2.2+ 提供的一对 API，用于跨层级传递数据。父组件可以使用 provide 来提供数据，任何子组件（不论层级）都可以使用 inject 来获取数据。
示例：
vue<!-- 祖组件 --> <script> export default { provide() { return { message: 'Hello from ancestor' }; } } </script> <!-- 孙组件 --> <script> export default { inject: ['message'], mounted() { console.log(this.message); // 输出 'Hello from ancestor' } } </script>
事件总线 是 Vue 实例上的一个空的 Vue 对象，充当一个全局的事件中心。可以用来触发和监听事件，实现任何组件之间的通信。Vue 3 中建议使用其他更符合现代模式的方式，而不是事件总线。
示例：
javascript// event-bus.js
import Vue from 'vue';
export const EventBus = new Vue();
// 组件 A 中触发事件
EventBus.$emit('eventName', data);
// 组件 B 中监听事件
EventBus.$on('eventName', (data) => {
console.log(data);
});
Vuex 是 Vue 的状态管理模式，适用于需要在多个组件之间共享状态的场景。它通过全局的状态树管理应用的状态，提供了集中式的状态管理。
示例：
javascript// store.js
export const store = new Vuex.Store({
state: {
message: 'Hello from Vuex'
},
mutations: {
updateMessage(state, newMessage) {
state.message = newMessage;
}
}
});
// 组件 A 中更改状态
this.$store.commit('updateMessage', 'New message');
// 组件 B 中读取状态
computed: {
message() {
return this.$store.state.message;
}
}
$refs、$parent 和 $children 是 Vue 提供的直接访问组件实例的方式。$refs 可以用于父组件访问子组件的方法或数据，$parent 和 $children 则分别用于访问父组件和子组件。
示例：
js<!-- 父组件 -->
<template>
<child-component ref="child"></child-component>
<button @click="accessChildMethod">Call Child Method</button>
</template>
<script>
export default {
methods: {
accessChildMethod() {
this.$refs.child.someMethod();
}
}
}
</script>
<!-- 子组件 -->
<script>
export default {
methods: {
someMethod() {
console.log('Method in child called');
}
}
}
</script>
props 和 $emit：用于父子组件通信。provide/inject：用于跨层级的组件通信。$refs、$parent、$children：用于直接访问组件实例的方法或数据。在 Vue.js 中，v-if 和 v-for 是两个常用的指令，分别用于条件渲染和列表渲染。理解它们的优先级关系以及为什么不推荐一起使用非常重要。
v-if 和 v-for 的优先级在 Vue.js 中，v-for 的优先级高于 v-if。这意味着当 v-if 和 v-for 一起使用在同一个元素上时，v-for 会首先执行。也就是说，Vue 会先循环遍历数据源，然后在每个循环项上再应用 v-if 条件判断。
因为 v-for 优先执行，这意味着即使某个项会因为 v-if 被过滤掉，Vue 也会先遍历所有项。假设你有一个很大的列表，而 v-if 条件又比较严格，结果可能是大部分元素都不会被渲染，但 Vue 仍然会遍历整个列表。这样会造成不必要的性能消耗。
示例：
js<template>
<ul>
<li v-for="item in items" v-if="item.isActive">{{ item.name }}</li>
</ul>
</template>
<script>
export default {
data() {
return {
items: [/* 很多数据项 */]
};
}
}
</script>
在这个例子中，即使 item.isActive 为 false 的大多数元素都不会显示，Vue 仍然会遍历 items 中的每一个元素，进行 v-if 判断。这对于大数据集来说可能会导致性能问题。
将 v-if 和 v-for 放在一起使用，可能会让代码逻辑变得复杂且难以维护。开发者在理解代码时，需要意识到 v-for 会先执行，这增加了理解的难度。
为了避免性能问题和保持代码的清晰性，通常建议将 v-if 放在 v-for 的外面，以过滤掉不符合条件的数据项，然后再进行循环。
示例：
js<template>
<ul>
<li v-for="item in filteredItems">{{ item.name }}</li>
</ul>
</template>
<script>
export default {
data() {
return {
items: [/* 数据项 */]
};
},
computed: {
filteredItems() {
return this.items.filter(item => item.isActive);
}
}
}
</script>
在这个改进的例子中，filteredItems 预先过滤掉了不需要显示的元素，v-for 只会遍历需要渲染的项。这不仅提高了性能，还让代码逻辑更加清晰。
v-for 的优先级高于 v-if，即 v-for 会先执行。v-if 放在 v-for 外部，使用计算属性或过滤器来提前过滤数据。Vue.js 的生命周期指的是一个 Vue 实例从创建到销毁的过程中的各个阶段。Vue 提供了多个生命周期钩子函数，允许开发者在这些特定的时机执行相应的代码。理解 Vue 的生命周期有助于我们在正确的时机执行代码，从而更好地管理应用的状态、性能以及资源。
Vue 实例的生命周期大致分为四个阶段：
beforeCreate：
data 和 methods 等属性还未被初始化，无法访问 data、computed 等。javascriptbeforeCreate() {
console.log('beforeCreate: 初始化数据之前');
}
created：
data、methods、computed 和 watch 等属性，但还没有开始挂载，$el 属性还不可用。javascriptcreated() {
console.log('created: 实例已创建');
this.fetchData();
}
beforeMount：
render 函数第一次被调用。javascriptbeforeMount() {
console.log('beforeMount: 挂载之前');
}
mounted：
$el 可以被访问。javascriptmounted() {
console.log('mounted: 挂载完成');
this.initializePlugin();
}
beforeUpdate：
javascriptbeforeUpdate() {
console.log('beforeUpdate: 数据更新前');
}
updated：
javascriptupdated() {
console.log('updated: 数据更新后');
}
beforeDestroy：
javascriptbeforeDestroy() {
console.log('beforeDestroy: 实例销毁前');
}
destroyed：
javascriptdestroyed() {
console.log('destroyed: 实例已销毁');
}
beforeCreate 和 created，初始化实例。beforeMount 和 mounted，挂载 DOM。beforeUpdate 和 updated，响应数据变化。beforeDestroy 和 destroyed，清理实例。在 Vue.js 中，双向绑定通常通过 v-model 指令实现。v-model 绑定在表单元素上，可以在数据模型和视图之间建立一个自动的双向数据流。
js<template>
<div>
<input v-model="message" placeholder="Enter a message">
<p>The message is: {{ message }}</p>
</div>
</template>
<script>
export default {
data() {
return {
message: ''
};
}
}
</script>
在这个示例中：
v-model="message" 绑定了输入框的值和数据模型中的 message 属性。message 的值会自动更新。message 的值更新时，页面上显示的 p 标签内容也会自动更新。v-model 的元素。在 Vue.js 中，双向绑定背后是通过数据劫持（Object.defineProperty 或 Proxy）实现的。Vue 监听数据的变化，并在数据变化时自动更新相关的 DOM 元素。
本文作者:Jeff Wu
本文链接:
版权声明:本博客所有文章除特别声明外，均采用 BY-NC-SA 许可协议。转载请注明出处！