第42节: Vue3 组件之间传值

简介: 第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;

订阅专栏,每日更新

相关文章
|
4天前
|
JavaScript
【vue】el-dialog 内的tinymce弹窗被遮挡的解决办法 及 tinymce打开弹出菜单后直接关闭对话组件,导致该弹出菜单残留
【vue】el-dialog 内的tinymce弹窗被遮挡的解决办法 及 tinymce打开弹出菜单后直接关闭对话组件,导致该弹出菜单残留
14 6
|
9天前
vue3【实战】语义化首页布局
vue3【实战】语义化首页布局
28 2
|
9天前
|
存储 容器
vue3【实战】来回拖拽放置图片
vue3【实战】来回拖拽放置图片
19 2
|
4天前
【vue3】Argumnt of type ‘history:RouterHistory;}is not assignable to paraeter of type ‘RouterOptions‘.
【vue3】Argumnt of type ‘history:RouterHistory;}is not assignable to paraeter of type ‘RouterOptions‘.
6 0
|
4天前
|
JavaScript
【vue3】vue3中路由hash与History的设置
【vue3】vue3中路由hash与History的设置
9 0
|
4天前
|
编解码 前端开发
【Vue3】解决电脑分辨率125%、150%及缩放导致页面变形的问题
【Vue3】解决电脑分辨率125%、150%及缩放导致页面变形的问题
11 0
|
4天前
|
JavaScript
【vue】vue 在线编辑、实时预览的代码交互组件 vue-code-view
【vue】vue 在线编辑、实时预览的代码交互组件 vue-code-view
10 0
|
4天前
|
JavaScript
【vue】 vue 翻页时钟制作,vue2、vue3
【vue】 vue 翻页时钟制作,vue2、vue3
11 0
|
2天前
|
JavaScript
|
1天前
|
存储 缓存 JavaScript
vue代码优化方案
【7月更文挑战第13天】 **Vue.js 优化要点:** 分解大组件以提高复用性和加载速度;利用计算属性与侦听器优化数据处理;使用Object.freeze()减少响应式数据;借助Vuex或Composition API管理状态;实现虚拟滚动和无限加载提升长列表性能;路由懒加载减少初始加载时间;用Vue DevTools检测性能瓶颈;定期代码审查与重构;应用缓存策略;遵循最佳实践与团队规范,提升应用整体质量。
10 2