vue2 v-io 父子组件双向绑定多个数据
2023-09-14 08:58:44 时间
可以减少使用 emit,组件自带的v-model好像也只能设置一个
npm i vue-io-directive
使用
import Vue from 'vue'
import { VueIoDirective } from "vue-io-directive";
Vue.directive("io", VueIoDirective);
父组件
<template>
<div id="app">
<input type="text" v-model="data.name" />
<HelloWorld v-io:child.name="data.name"></HelloWorld>
</div>
</template>
<script>
import HelloWorld from "./components/HelloWorld.vue";
export default {
name: "App",
data() {
return {
data: {
name: ""
}
};
},
components: {
HelloWorld
}
};
</script>
子组件
<template>
<div class="hello">
<input type="text" v-model="child.name" />
</div>
</template>
<script>
export default {
name: "HelloWorld",
data() {
return {
child: {
name: ""
}
};
},
watch: {
"child.name": function(val) {
console.log(val);
}
}
};
</script>
相关文章
- 大数据生态圈常用组件(一):数据库、查询引擎、ETL工具、调度工具等
- 02-React脚手架+Todos项目(组件拆分, State应用, 组件通信+数据校验, nanoid)
- vue弹窗组件封装_vue弹出框组件
- vue子组件给父组件传值 接收不到数据_vue父向子组件传值
- 哈~这个vue3组件库中的组件真的是超多,不来试试吗?
- 程序员都应该懂Kubernetes的基本概念和关键组件是什么吗?
- 【React】学习笔记(一)——React入门、面向组件编程、函数柯里化
- vue子组件向父组件传值的三种方式_vue子组件改变父组件的值
- (二十六)组件错误处理
- 假如大数据组件中的动物都变成神奇宝贝,那会变成什么样?
- 【Android 进程保活】应用进程拉活 ( 系统 Service 机制拉活 | Service 组件 onStartCommand 方法分析 | 源码资源 )
- 【Android 屏幕适配】屏幕适配通用解决方案 ② ( 自定义组件解决方案 | 需要解决的问题 : 设计稿坐标数据转为屏幕真实坐标数据 | 实现步骤 )
- 【Android 屏幕适配】屏幕适配通用解决方案 ⑤ ( 自定义组件解决方案 | 自定义 ViewGroup 组件 onMeasure 方法中计算每个子组件坐标数据 | 自定义组件完整代码 )
- 【Java AWT 图形界面编程】菜单组件 ① ( 菜单相关组件简介 | 菜单组件使用步骤 | 菜单列表中添加分割线 | 设置 MenuItem 菜单项快捷键 )
- OpenServer是一款超轻量、超迷你、Actor模式、组件设计的高性能、高并发的跨全平台服务器框架
- Hystrix的组件和架构
- 基于Redis+Lua脚本实现分布式限流组件封装的方法
- MapReduce(二)常用三大组件详解大数据
- 搭建maven开发环境测试Hadoop组件HDFS文件系统的一些命令详解大数据
- Akka(18): Stream:组合数据流,组件-Graph components详解编程语言
- 华为鸿蒙 HarmonyOS 再增 300+ 开源组件
- Oracle IO 99注入新活力驱动大数据(oracle io 99)