vue3组件之间传值通讯
vue
vuejs/vue: 是一个用于构建用户界面的 JavaScript 框架,具有简洁的语法和丰富的组件库,可以用于开发单页面应用程序和多页面应用程序。
项目地址:https://gitcode.com/gh_mirrors/vu/vue
免费下载资源
·
Vue 3 提供了多种组件间传值和通讯的方式。以下将以长博客的形式,详细解释这些方法及其应用场景。
1. props 向下传值
props
是 Vue 中用于父组件向子组件传递数据的方式。在子组件中,我们可以使用 props
来接收父组件传递过来的数据。
父组件
<template> <div> <child-component :message="parentMessage"></child-component> </div> </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: { type: String, required: true } } } </script>
2. 事件(Event)向上传值
当子组件需要向父组件传递数据时,可以使用自定义事件(Custom Event)。在子组件中,使用 $emit
方法触发事件并传递数据,父组件通过监听这个事件来获取数据。
子组件
<template> <button @click="notifyParent">Notify Parent</button> </template> <script> export default { methods: { notifyParent() { this.$emit('child-event', 'Hello from Child!'); } } } </script>
父组件
<template> <div> <child-component @child-event="handleChildEvent"></child-component> </div> </template> <script> import ChildComponent from './ChildComponent.vue'; export default { components: { ChildComponent }, methods: { handleChildEvent(message) { console.log(message); // 输出 'Hello from Child!' } } } </script>
3. Vuex 状态管理
对于大型应用或需要全局共享数据的情况,可以使用 Vuex 进行状态管理。Vuex 提供了集中存储管理应用的所有组件的状态,并以相应的规则保证状态以一种可预测的方式发生变化。
安装和配置 Vuex
npm install vuex
创建 Vuex Store
// store.js import { createStore } from 'vuex'; export default createStore({ state: { count: 0 }, mutations: { increment(state) { state.count++; } } });
在 Vue 应用中使用 Vuex
import { createApp } from 'vue'; import App from './App.vue'; import store from './store'; const app = createApp(App); app.use(store); app.mount('#app');
在组件中使用 Vuex
<template> <div>{{ count }}</div> <button @click="increment">Increment</button> </template> <script> export default { computed: { count() { return this.$store.state.count; } }, methods: { increment() { this.$store.commit('increment'); } } } </script>
希望 以上对您有所帮助
GitHub 加速计划 / vu / vue
207.54 K
33.66 K
下载
vuejs/vue: 是一个用于构建用户界面的 JavaScript 框架,具有简洁的语法和丰富的组件库,可以用于开发单页面应用程序和多页面应用程序。
最近提交(Master分支:2 个月前 )
73486cb5
* chore: fix link broken
Signed-off-by: snoppy <michaleli@foxmail.com>
* Update packages/template-compiler/README.md [skip ci]
---------
Signed-off-by: snoppy <michaleli@foxmail.com>
Co-authored-by: Eduardo San Martin Morote <posva@users.noreply.github.com> 4 个月前
e428d891
Updated Browser Compatibility reference. The previous currently returns HTTP 404. 5 个月前
更多推荐
已为社区贡献8条内容
所有评论(0)