041组件传值与状态管理绑定的实现方式

从主结构页面中向下传状态管理的值

// 引入Pinia的状态管理模块
import storeModel from './stores/model';// 定义模块名；定义需要取出的数据名。
const Model = storeModel();
const model = Model.model;const { getTaskData } = ModelTaskMixin(model);

通过监听url参数变化重新获取模型并更新状态管理

// 通过url中参数变化重新加载模型
watch(() => router.currentRoute.value.params.sn,(newVal, oldVal) => {if (newVal && newVal !== oldVal) {getTaskData((newVal as string) || '');}},{immediate: true,}
);

使用状态管理值，为获得最新状态采用计算方式获得

// 这里使用计算属性是为了同步子组件中的更改
const programCom = computed(() => {const m = model.customConfig.page;return defineAsyncComponent(() => import(`./index/${m}.vue`));
});

子组件采用全量下探传值

// 向下尽量保持整个模型传递
const props = defineProps<{model: any;skin?: string;
}>();

向下传递子组件的值的时候，使用计算属性绑定

const props = defineProps<{model: any;type: string;skin?: string;index: number;
}>();
// 需要向子组件传值模型内数据，采用计算属性
const treenode = computed(() => props.model.tasks[props.index][props.type]);

041组件传值与状态管理绑定的实现方式相关推荐

onmounted vue3_基于项目时间阐述vue3.0新型状态管理和逻辑复用方式
作者:Mingle 转发链接:https://mp.weixin.qq.com/s/iOq-eeyToDXJ6lvwnC12DQ 前言背景:2019年2月6号,React 发布「16.8.0」版 ...
Web前端的状态管理
背景我相信很多朋友跟我一样,初次听到什么 Flux , Redux , Vuex , 状态管理的时候是一脸懵逼的.因为在外面之前前端大部分开发的时候,根本没有那么多的概念.自从ReactJS火 ...
Vue.js（8）- 父组件给子组件传值
父组件给子组件传值原理:属性绑定第一步:建立连接 B.vue <template><div><h3>这是B.vue文件内容</h3><h4> ...
useState 函数式状态管理
本文首发说说前端,可点击查看原文支持作者. React 有两种方式可以实现组件的定义,一种是通过函数实现,一种是通过class类实现.一般的通过class类实现的组件我们可以看到足够多的生命周期.状态 ...
Vue组件传值存在的弊端-Vuex状态管理
以下内容纯属个人理解,旨在记录和分享. 导入使用Vue组件传值,可以实现父子组件之间的数据交换.但实际上,在应用过程中仍然存在很多不便之处: 当存在多层组件嵌套时,组件之间的传值将会变得极度麻烦和繁 ...
React组件设计实践总结05 - 状态管理
今天是 520,这是本系列最后一篇文章,主要涵盖 React 状态管理的相关方案. 前几篇文章在掘金首发基本石沉大海, 没什么阅读量. 可能是文章篇幅太长了?掘金值太低了? 还是错别字太多了? 后面静 ...
hooks组件封装 react_名符其实的react下一代状态管理器hox
自从 React16 版本发布 Hooks 以来,大家纷纷上车尝鲜.毫无疑问, Hooks 在一定程度上解决了组件间功能和逻辑复用的问题,在组件间的逻辑的封装和复用确实真香,但 Hooks 在数据状态 ...
实战 | Element UI 父子组件传值与事件绑定（逆向）
这是小小本周的第四篇,本篇将会倒过来讲解Element UI 父子组件传值与事件绑定. 父子组件传值新建父组件和子组件新建父组件代码如下 <template><div id=& ...
实战 | Element UI 父子组件传值与事件绑定（正向）
这是小小的本周的第三篇,本篇将会讲解关于Element UI 父子组件传值与事件绑定. 父子组件传值新建父组件和子组件新建父组件代码如下 <template><div id=& ...

041组件传值与状态管理绑定的实现方式

041组件传值与状态管理绑定的实现方式

从主结构页面中向下传状态管理的值

通过监听url参数变化重新获取模型并更新状态管理

使用状态管理值，为获得最新状态采用计算方式获得

子组件采用全量下探传值

向下传递子组件的值的时候，使用计算属性绑定

041组件传值与状态管理绑定的实现方式相关推荐

最新文章

热门文章