第42节: Vue3 组件之间传值

在UniApp中使用Vue3框架时，有多种方式可以在组件之间进行传值。以下是几种常见的示例：

1. 使用props和事件（父组件向子组件传值）：

父组件：

<template>  
  <view>  
    <child-component :message="parentMessage" @child-event="handleChildEvent"></child-component>  
  </view>  
</template>  
  
<script setup>  
import { ref } from 'vue';  
import ChildComponent from './ChildComponent.vue';  
  
const parentMessage = ref('Hello from parent component!');  
const childComponent = ref(null);  
  
onMounted(() => {  
  childComponent.value = new ChildComponent({ props: { message: parentMessage.value } });  
});  
  
methods: {  
  handleChildEvent(event) {  
    console.log(event);  
  }  
}  
</script>

子组件（ChildComponent.vue）：

<template>  
  <view @click="sendEvent">  
    <p>{{ message }}</p>  
  </view>  
</template>  
  
<script setup>  
import { ref, emit } from 'vue';  
  
const message = ref('');  
const sendEvent = () => { emit('child-event') }  
</script>

在上面的示例中，父组件通过v-bind指令将parentMessage的值传递给子组件，并在子组件上注册了一个名为child-event的事件监听器。子组件接收到父组件传递的值并在模板中进行显示，同时当点击时触发名为child-event的事件，将事件对象作为参数传递给父组件的handleChildEvent方法。

\2. 使用Vuex（全局状态管理）：

在UniApp中，可以使用Vuex来进行全局状态管理，将数据存储在一个集中式的存储中，并在多个组件之间共享。以下是一个简单的示例：

首先，在项目根目录下创建一个名为store.js的文件，用于定义Vuex的store：

store.js：

import { createStore } from 'vuex';  
import ChildComponent from './ChildComponent.vue';  
import ParentComponent from './ParentComponent.vue';  
  
const store = createStore({  
  state: {  
    message: ''  
  },  
  mutations: {  
    setMessage(state, value) { state.message = value }  
  },  
  modules: { }  
});  
  
export default store;

订阅专栏，每日更新

教学视频 Uniapp Vue3 基础到实战

第41节：Vue3 watch函数