Vue 组件间六种通信方式详解

Vue 组件间通信六种方式 在 Vue.js 中，组件实例的作用域是相互独立的，这意味着不同组件之间的数据无法相互引用。因此，组件间通信变得非常重要。根据不同的使用场景，选择合适的通信方式是非常关键的。本文总结了 Vue 组件间通信的六种方式：props、$emit/$on、Vuex、$parent/$children、$attrs/$listeners 和 provide/inject。 1. Props Props 是 Vue 中最基本的组件间通信方式。父组件可以通过 props 将数据传递给子组件。子组件可以通过 props 接收父组件传递的数据。 例如，在 App.vue 父组件中，我们可以通过 props 将用户数据传递给 Users.vue 子组件： ```html // App.vue 父组件 <template> <div id="app"> <users v-bind:users="users"></users> </div> </template> <script> export default { name: 'App', data() { return { users: ["Henry", "Bucky", "Emily"] } }, components: { "users": Users } } ``` 在 Users.vue 子组件中，我们可以通过 props 接收父组件传递的数据： ```html // Users.vue 子组件 <template> <div class="hello"> <ul> <li v-for="user in users">{{ user }}</li> </ul> </div> </template> <script> export default { name: 'HelloWorld', props: { users: { type: Array } } } </script> ``` 2. $emit/$on $emit/$on 是一种基于事件的通信方式。子组件可以通过 $emit 触发事件，而父组件可以通过 $on 监听事件。 例如，在 Users.vue 子组件中，我们可以通过 $emit 触发事件： ```html // Users.vue 子组件 <template> <div class="hello"> <button @click="$emit('addUser', 'New User')">添加用户</button> </div> </template> <script> export default { name: 'HelloWorld' } </script> ``` 在 App.vue 父组件中，我们可以通过 $on 监听事件： ```html // App.vue 父组件 <template> <div id="app"> <users @addUser="handleAddUser"></users> </div> </template> <script> export default { name: 'App', methods: { handleAddUser(user) { console.log(`添加用户：${user}`); } } } </script> ``` 3. Vuex Vuex 是一个状态管理器，可以帮助我们管理应用程序的状态。我们可以使用 Vuex 来实现组件间通信。 例如，我们可以创建一个 store.js 文件： ```javascript import Vuex from 'vuex'; const store = new Vuex.Store({ state: { users: ["Henry", "Bucky", "Emily"] }, mutations: { addUser(state, user) { state.users.push(user); } } }); export default store; ``` 然后，在 App.vue 父组件中，我们可以使用 Vuex 来获取状态： ```html // App.vue 父组件 <template> <div id="app"> <users></users> </div> </template> <script> import store from './store'; export default { name: 'App', computed: { users() { return store.state.users; } } } </script> ``` 4. $parent/$children $parent/$children 是一种基于组件树的通信方式。我们可以使用 $parent 来访问父组件，而使用 $children 来访问子组件。 例如，在 App.vue 父组件中，我们可以使用 $children 来访问子组件： ```html // App.vue 父组件 <template> <div id="app"> <users ref="users"></users> </div> </template> <script> export default { name: 'App', mounted() { console.log(this.$refs.users); // 访问子组件 } } </script> ``` 5. $attrs/$listeners $attrs/$listeners 是一种基于组件树的通信方式。我们可以使用 $attrs 来访问父组件传递的属性，而使用 $listeners 来访问父组件传递的事件。 例如，在 Users.vue 子组件中，我们可以使用 $attrs 来访问父组件传递的属性： ```html // Users.vue 子组件 <template> <div class="hello"> <ul> <li v-for="user in $attrs.users">{{ user }}</li> </ul> </div> </template> <script> export default { name: 'HelloWorld' } </script> ``` 6. Provide/Inject Provide/Inject 是一种基于依赖注入的通信方式。我们可以使用 Provide 来提供数据，而使用 Inject 来 inject 数据。 例如，在 App.vue 父组件中，我们可以使用 Provide 来提供数据： ```html // App.vue 父组件 <template> <div id="app"> <users></users> </div> </template> <script> export default { name: 'App', provide: { users: ["Henry", "Bucky", "Emily"] } } </script> ``` 在 Users.vue 子组件中，我们可以使用 Inject 来 inject 数据： ```html // Users.vue 子组件 <template> <div class="hello"> <ul> <li v-for="user in users">{{ user }}</li> </ul> </div> </template> <script> export default { name: 'HelloWorld', inject: ['users'] } </script> ``` 选择合适的通信方式取决于不同的使用场景。了解这些通信方式可以帮助我们更好地开发 Vue 应用程序。