Vue2 父子组件某一属性的双向绑定

news/2024/7/9 23:41:01 标签: javascript, vue
  • 原本:父组件使用props传值给孩子组件初始化,触发事件子组件使用$emit传值给父组件,很麻烦
  • 后来:使用computed和$event
  • 例子代码:
javascript"><template>
  <div class="box">
    grandpa <el-input v-model="model.title"></el-input>
    <Father :titleProp="model.title" @handleInput:titleProp="model.title = $event" />
  </div>
</template>

<script>
import Father from "./Father.vue";
export default {
  data() {
    return {
      model: {
        title: "",
      },
    };
  },
  components: {
    Father,
  },
  methods: {
    handleInput(val) {
      this.model.title = val;
    },
  },
};
</script>


javascript"><template>
  <div class="father" ref="father">
    father <el-input v-model="title"></el-input>
  </div>
</template>

<script>
export default {
  computed: {
    title: {
      get() {
        return this.$props.titleProp;
      },
      set(value) {
        this.$emit("handleInput:titleProp", value);
      },
    },
  },
  props: {
    titleProp: String,
  },
  methods: {},
};
</script>

在这里插入图片描述


http://www.niftyadmin.cn/n/5430274.html

相关文章

Liunx文件系统和基础IO

文件系统和基础IO 基础IOc语言基础IO函数当前路径和标准流系统IO系统调用函数重定向FILE文件结构体 在谈缓存区问题理解文件系统初识inode 基础IO c语言基础IO函数 打开与关闭 FILE *fopen(char *filename, const char *mode);选项还可以是 r/w/a 意味着为可读可写打开。 2…

接口测试实战--使用docker方案去部署jenkins并搭建接口自动化项目

一、搭建环境 1.几个概念 CI:持续集成 CD:持续交付 DevOps(development and operations):是一个框架,是一种方法论,并不是一套工具,包括一系列基本原则和实践,核心价值在于更快速的交付和响应市场变化。 jenkins:一个开源框架,需要操作什么流程,就下载什么插件 2…

elementUi自定义表头,根据判断显示不同的表头

一、根据tabIndex变量值&#xff0c;显示不同的表头header 二、代码 <el-table-column min-width"220" show-overflow-tooltip><template slot"header" slot-scope"scope">{{tabIndex1?表头栏目1:表头栏目222}}</template>…

MyBatisPlus——Wrapper

Wrapper体系 QueryWrapper 使用字符串表示列名&#xff0c;通过字符串拼接的方式构建查询条件 再将 wrapper 作为条件参数&#xff0c;写入BaseMapper提供的查找方法中&#xff08;或其他数据库方法&#xff09; QueryWrapper<QueryEntity> wrapper new QueryWrapper&l…

Linux-TCP并发模型-013

1【TCP】多线程模型 2【IO】模型 2.1阻塞IO 没有数据到来时&#xff0c;可以让任务挂起&#xff0c;节省CPU资源开销&#xff0c;提高系统效率2.2非阻塞IO 程序未收到数据时一直执行&#xff0c;效率很低2.3异步IO 只能绑定一个文件描述符用来读取数据2.4多路复用IO 2.4.…

C++面试问题收集

0 持续更新中 目录 0 持续更新中 1 C语言相关 1.1 malloc/free和new/delete区别 1.2 内存泄漏 1.3 堆区和栈区的区别 1.4 宏定义和const的区别 1.5 多态 1.6 类中的静态成员变量 2 操作系统相关 2.1 进程和&#xff08;用户&#xff09;线程的区别 2.2 系统调用 2.3…

《软件工程》复试问答题总结

软件系统的三个测试阶段&#xff1a; 第一阶段&#xff1a;发现和解决BUG 集中在发现bug&#xff0c;考研测试设计能力&#xff0c;发现bug之后如何清晰表述定级&#xff0c;以及验证&#xff0c;之后举一反三尽早发现更多类似bug 第二阶段&#xff1a;质量的管理 多做质量数据…

【JS】数组查重

码 /*** 数组查重* param {Array} arr 查重的数组* returns Array 返回不重复的数组 */ const noReArr arr > [...new Set(arr)]const a [12,12,3,4] console.log( noReArr(a) );效果图