vue2自定义组件v-model实现

news/2024/4/23 13:26:27/

页面设置和组件管理切换:使用自定义组件v-model实现

  •     setType是从vuex中读取的值,放在computed中
  •     父组件通过v-model将值setType传递给子组件ChangeSetType
  •     子组件接收v-model值: 使用props中固定值value接受
  •     子组件更改v-model值: 使用this.$emit("input", val),事件名必须是input
  •     父组件中因为需要接收子组件传递的值对setType进行更改,而setType是computed计算属性,所以需要使用get/set方法实现
  •     get时从vuex中获取值,set时,通过vuex中的更改setType的方法对setType值进行修改

 父组件:

    <change-set-type v-model="setType"></change-set-type>
  computed: {setType: {get() {return this.$store.state.decorate.setType;},set(newVal) {this.SET_TYPE(newVal);}}},methods: {...mapMutations("decorate", ["SET_TYPE"])}

子组件:

<template><ul class="page-set-list"><li :class="value==1?'active':''" @click="setAcive"><i class="icon page"></i>页面设置</li><li :class="value==2?'active':''" @click="setAcive"><i class="icon component"></i>组件管理</li></ul>
</template>
<script>
export default {props: {value: {type: Number,default: 1}},methods: {setAcive() {let type = this.value === 1 ? 2 : 1;this.$emit("input", type);}}
};
</script>

 


http://www.ppmy.cn/news/1210498.html

相关文章

toolbox-app 升级出现无法识别已安装app

toolbox-app升级后无法识别已安装的app。 因为toolbox-app 2.x版本升级后需要执行原有安装app的迁移。若是不执行迁移&#xff0c;新版本的toolbox-app是无法识别已安装app。 这时卸载新版本的toolbox-app&#xff0c;安装回1.x的版本&#xff0c;就可以&#xff0c;若是执行更…

深入理解 poll 与 epoll:性能、可扩展性与事件触发方式的比较

1. 性能 poll 的性能特点&#xff1a; poll 使用轮询的方式检查所有被监视的文件描述符&#xff0c;即使它们没有发生变化。随着连接数的增加&#xff0c;poll 的性能下降较快&#xff0c;因为需要不断遍历整个监视列表。 epoll 的性能特点&#xff1a; epoll 使用事件驱动…

React进阶之路(四)-- React-router-v6、Mobx

文章目录 ReactRouter前置基本使用核心内置组件说明编程式导航路由传参嵌套路由默认二级路由404路由配置集中式路由配置 Mobx什么是Mobx环境配置基础使用observer函数*计算属性&#xff08;衍生状态&#xff09;异步数据处理模块化多组件数据共享Mobx和React职责划分 ReactRout…

Postman的环境变量和全局变量

近期在复习Postman的基础知识&#xff0c;在小破站上跟着百里老师系统复习了一遍&#xff0c;也做了一些笔记&#xff0c;希望可以给大家一点点启发。 多种环境&#xff1a;开发环境、测试环境、预发布环境、生产环境&#xff0c;可以用环境变量来解决。 今天的分享就到这里&a…

LeetCode【701】二叉搜索数的插入操作

题目&#xff1a; 思路&#xff1a; https://zhuanlan.zhihu.com/p/272781596 代码&#xff1a; class Solution {public TreeNode insertIntoBST(TreeNode root, int val) {return process(root,val); }//递归public TreeNode process(TreeNode root,int val){//base ca…

基于Mahony互补滤波的IMU数据优化_学习笔记整理

这周自己被安排进行优化软件 IMU 姿态解算项目&#xff0c;之前自己只简单了解四元数&#xff0c;对IMU数据处理从未接触&#xff0c;通过这一周的学习感觉收获颇丰&#xff0c;在今天光棍节之际&#xff0c;&#xff0c;&#xff0c;用大半天的时间对这一周的收获进行整理&…

Mybatis教程

Mybatis教程 参考&#xff1a; MyBatis教程看这一篇就够啦&#xff0c;简单又全面&#xff08;IDEA版&#xff09; MyBatis详解 MyBatis(一文学会&#xff01;) MyBatis教程&#xff08;看这一篇就够了&#xff09; mybatis查询结果对象值为null的情况 mybatis查询结果对…

C++函数模板与内存管理详解

情景引入&#xff1a; 现在假设我们要写一个swap函数交换两个值的大小&#xff0c;我们知道在之前讲过的函数重载是支持不同类型的参数重载的&#xff0c;因此我们只要写出int ,double ,char ,float ,bool的类型函数重载就行了&#xff0c;但是这个函数的功能差距不大&#xf…

[autojs]逍遥模拟器和vscode对接

第一步&#xff1a;启动autojs服务 第二步&#xff1a;去cmd查看ip地址&#xff0c;输入ipconfig 第三步&#xff1a;打开逍遥模拟器中的sutojs-左上角- 连接电脑&#xff0c;然后输入WLAN或者其他ip也行&#xff0c;根据自己电脑实际情况确认 此时vscode显示连接成功。我们写…

Hls学习(一)

1&#xff1a;CPU、DSP、GPU都算软件可编程的硬件 2&#xff1a;dsp在递归方面有所减弱&#xff0c;在递归方面有所增强&#xff0c;比如递归啊等&#xff0c;GPU可以同时处理多个进程&#xff0c;对于大块数据&#xff0c;流处理比较适用 3&#xff1a;为了提高运算量处理更多…

C++ 编译与链接过程

案例讲解 有 main.cpp 和 add.cpp 2个文件&#xff0c;add.cpp中实现add_func函数&#xff0c;main.cpp文件中需要使用add_func函数。 demo&#xff1a; // main.cpp文件 #include <iostream>int add_func(int a, int b);int main() {int a 10;int b 10;int ret ad…

可视化 | 3D文字球状标签云

文章目录 &#x1f4da;改编点&#x1f4da;final 改编自echarts 3d词云&#xff08;指向滑动、拖动、缩放、点击、自转 &#xff09; &#x1f4da;改编点 背景透明&#xff1a;background:rgb(0,0,0,0);不用链接&#xff0c;用span&#xff0c;重点span标class"star&q…

如何选择一个可靠的爬虫代理服务商?技术人员都需要知道

我身边从事大数据相关行业的朋友最近告诉我&#xff0c;自己新招的小伙伴工作效率很低&#xff0c;很多最基础的工具都不会选择&#xff0c;经常因为代理IP不可靠导致工作出错。 听完这些我才意识到&#xff0c;在这个大数据时代&#xff0c;还是有很多新手在进行网络爬取任务…

如何将BMP图片批量转为PNG透明图片,并去掉BMP黑色背景

将BMP图片批量转为PNG透明图片&#xff0c;并去掉BMP黑色背景&#xff0c;这里推荐一款软件bmp2png&#xff0c;关键是免费的。截图如下&#xff1a; 这个小软件不仅可以将bmp图片批量转为png图片&#xff0c;而且还增加了压缩功能&#xff0c;导出png图片时压缩导出图片&#…

SwiftUI 如何保证 Text 中字符数量相等的字符串显示宽度一定相同?

0. 问题现象 在 SwiftUI 中我们往往需要将内容相似的字符串展列出来给用户比较,这些字符串内容各有不同但字符数量始终是相等的,我们希望它们的显示宽度始终保持一致: 如上图所示:即使是等宽字符组成的字符串在字符数量相等时它们的显示宽度仍然可能不一致。但演示中最底部…

14 # 手写 debounce 防抖方法

什么是防抖 防抖: n 秒后再去执行该事件&#xff0c;若在 n 秒内被重复触发&#xff0c;则重新计时&#xff0c;这个效果跟英雄联盟里的回城技能差不多。 本质上是优化高频率执行代码的一种手段&#xff0c;目的就是降低回调执行频率、节省计算资源。 应用场景&#xff1a; …

使用 pubsub-js 进行消息发布订阅

npm 包地址 github 包地址 pubsub-js 是一个轻量级的 JavaScript 基于主题的消息订阅发布库 &#xff0c;压缩后小于1b。它具有使用简单、性能高效、支持多平台等优点&#xff0c;可以很好地满足各种需求。 功能特点&#xff1a; 无依赖同步解耦ES3 兼容。pubsub-js 能够在…

王道数据结构第五章二叉树的遍历第18题

目录 题目描述 解题思路 宏定义 二叉树定义 实现函数 测试代码 测试结果

聊聊性能测试的左移右移

前面的文章中&#xff0c;分享过我对于测试左移右移的一些思考和实践方法。有同学在后台留言问我&#xff1a;常规的性能测试一般都是在测试阶段集成测试时候才开始介入&#xff0c;很容易测试时间不够&#xff0c;可不可以借鉴测试左移右移的思路&#xff0c;更早的介入和发现…

c语言实现哈夫曼编码

要实现哈夫曼编码&#xff0c;需要以下步骤&#xff1a; 统计字符出现的频率构建哈夫曼树遍历哈夫曼树&#xff0c;给不同的字符赋予不同的编码将编码后的字符写入文件中 下面是一个简单的 C 语言实现&#xff1a; #include <stdio.h> #include <stdlib.h> #inc…