Vue3组件间常用的通讯方式

最新推荐文章于 2025-04-08 23:04:14 发布

原创最新推荐文章于 2025-04-08 23:04:14 发布 · 351 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#前端 #javascript #vue.js

本文详细介绍了Vue3中组件间的通信方式，包括父组件通过props向子组件传递数据，子组件通过$emit触发事件，以及使用$refs在组件间直接引用。同时，还探讨了Vuex作为状态管理库在集中式数据存储和同步中的作用。

一 . 父组件 props和$emit

使用props和$emit是Vue 3中最基本的组件间通信方式。一个组件可以通过props向它的子组件传递数据，子组件则可以通过$emit触发一个事件，并将数据传递给父组件。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>
    <template>
        <!-- 父组件 -->
        <child :message="msg" @update="handleUpdate"></child>
    </template>
    <script>
        import Child from './child.html'
        export default {
            components:{
                Child,
            },
            data(){
                return {
                    msg:'Hello,child!'
                }
            },
            methods:{
                handleUpdate(data){
                    this.msg=data
                }
            }
        }
    </script>
</body>
</html>

子组件

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>
    <template>
        <!-- 子组件 -->
        <div>
            <child ref="child"></child>
            <button @click="handleClick">点我</button>
        </div>
    </template>
    <script>
        import child from './child.html'
        export default{
            comments:{
                child,
            }
        }
        methods:{
           
        }
    </script>
</body>
</html>

二: $refs

使用provide和inject可以在祖先组件中向子孙组件传递数据，而不需要显式地通过props和$emit传递。

父组件:

<template>
  <div>
    <child ref="child"></child>
    <button @click="handleClick">Call Child Method</button>
  </div>
</template>
 
<script>
import Child from './Child.vue';
 
export default {
  components: {
    Child,
  },
  methods: {
    handleClick() {
      this.$refs.child.sayHello();
    },
  },
};
</script>

子组件：

<template>
  <div>
    <p>Hello, I am a child component</p>
  </div>
</template>
 
<script>
export default {
  methods: {
    sayHello() {
      console.log('Hello from child component!');
    },
  },
};
</script>

三:Vuex

Vuex 是一个状态管理库，它提供了一种集中式存储管理应用的所有组件所需的数据和状态的方式。

import { createStore } from 'vuex';
 
const store = createStore({
  state() {
    return {
      message: 'initial message'
    };
  },
  mutations: {
    updateMessage(state, message) {
      state.message = message;
    }
  }
});
 
export default store;
 
// 发送事件的组件
import { mapMutations } from 'vuex';
 
export default {
  methods: {
    ...mapMutations(['updateMessage']),
    sendMessage() {
      this.updateMessage('data from sender');
    }
  }
};
 
// 接收事件的组件
import { mapState } from 'vuex';
 
export default {
  computed: {
    ...mapState(['message'])
  }
}