武汉网页设计高级培训学校_喜茶品牌策划全案案例_seo方案怎么做_网络营销工程师是做什么的

【props】

父组件通过props向子组件传递数据；

<!-- 父组件 -->
<template><ChildComponent :message="parentMessage" />
</template>
<script>
import ChildComponent from './ChildComponent.vue';
export default {components: { ChildComponent },data() {return {parentMessage: 'Hello from Parent',};},
};
</script><!-- 子组件 -->
<template><div>{{ message }}</div>
</template>
<script>
export default {props: ['message'],
};
</script>

【$emit】

子组件通过$emit触发事件，父组件监听事件并处理数据；

<!-- 子组件 -->
<template><button @click="sendMessage">Send Message</button>
</template>
<script>
export default {methods: {sendMessage() {this.$emit('message-from-child', 'Hello from Child');},},
};
</script><!-- 父组件 -->
<template><ChildComponent @message-from-child="handleMessage" />
</template>
<script>
import ChildComponent from './ChildComponent.vue';
export default {components: { ChildComponent },methods: {handleMessage(message) {console.log(message); // 输出: Hello from Child},},
};
</script>

【Event Bus】

创建一个全局事件总线，兄弟组件通过事件总线通信；

// eventBus.js
import Vue from 'vue';
export const EventBus = new Vue();// 组件 A
EventBus.$emit('message', 'Hello from A');// 组件 B
EventBus.$on('message', (message) => {console.log(message); // 输出: Hello from A
});

【provide和inject】

祖先组件通过 provide 提供数据，后代组件通过 inject 注入数据；

// 祖先组件
export default {provide() {return {message: 'Hello from Ancestor',};},
};// 后代组件
export default {inject: ['message'],
};

【Vuex】

Vuex 是 Vue 2 的官方状态管理工具；

// store.js
import Vue from 'vue';
import Vuex from 'vuex';
Vue.use(Vuex);
export default new Vuex.Store({state: { message: 'Hello from Vuex' },mutations: {setMessage(state, message) {state.message = message;},},
});// 组件
export default {computed: {message() {return this.$store.state.message;},},methods: {updateMessage() {this.$store.commit('setMessage', 'New Message');},},
};