moel vue 自定义v_vue如何在自定义组件中使用v-model
v-model指令
所谓的“指令”其实就是扩展了HTML标签功能(属性)。
先来一个组件，不用vue-model，正常父子通信
我是父亲, 对儿子说： {{sthGiveChild}}
import Child from './Child.vue';
export default {
data() {
return {
sthGiveChild: '给你100块'
};
},
components: {
Child
},
methods: {
turnBack(val) {
this.sthGiveChild = val;
}
}
}
我是儿子，父亲对我说： {{give}}
回应
export default {
props: {
give: String
},
methods: {
returnBackFn() {
this.$emit('returnBack', '还你200块');
}
}
}
点击回应后，父亲对儿子说的话变成了儿子的回应。儿子收到的信息也变了，实现通信。
改用v-model
我是父亲, 对儿子说： {{sthGiveChild}}
import Child from './Child.vue';
export default {
data() {
return {
sthGiveChild: '给你100块'
};
},
components: {
Child
}
}
我是儿子，父亲对我说： {{give}}
回应
export default {
props: {
give: String
},
model: {
prop: 'give',
event: 'returnBack'
},
methods: {
returnBackFn() {
this.$emit('returnBack', '还你200块');
}
}
}
文案虽有不同，但是效果最终是一致的。
看看官方自定义组件的v-model
有这么一句话： 默认情况下，一个组件上的 v-model 会把 value 用作 prop 且把 input 用作 event。
尝试把上边子组件的例子改一下，也是跑的通的
我是儿子，父亲对我说： {{value}}
回应
export default {
props: {
value: String
},
methods: {
returnBackFn() {
this.$emit('input', '还你200块');
}
}
}
做一下总结：
如果你懒，不想自己去处理事件，那就用默认的 'value' && 'input' 事件去处理，如果用原生事件的，甚至连model属性也可以省去。
如果你想自己的代码比较明确，区分出自定义事件，那么下面的组合才是你的菜。
prop和event看你自己心情定义，当然要知名见意【尽量避开关键字】
model: {
prop: 'someProp', // 注意，是prop，不带s。我在写这个速记的时候，多写了一个s，调试到怀疑人生
event: 'someEvent'
}
this.$emit('someProp', [returnValueToParent])
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。
moel vue 自定义v_vue如何在自定义组件中使用v-model相关推荐
- vue 父刷新子_父组件中vuex方法更新state子组件不能及时更新并渲染的完美解决方法...
场景: 我实际用到的是这样的,我父组件引用子组件related,父组件调用获取页面详情的方法,更新了state值related,子组件根据该related来渲染相关新闻内容,但是页面打开的时候总是先加 ...
- vue 获取当前路由_VUE 在组件中 获取 路由信息
一.核心代码 1.获取参数 this.$route.query.id this.$route.query 2.页面跳转 登录 3.方法跳转 this.$router.push({ path: '/lo ...
- 前端学习（3003）：vue+element今日头条管理--关于组件中的@
- vue 、 在element-ui的el-table组件中 使用 el-select绑定对象时value-key的注意事项
// 绑定对象时设置了value-key,再次点击时不会高亮,找了源码发现key需要一致: // 相关源码 isEqual(a, b) {if (!this.isObject) {return a = ...
- vue常用插件，可自定义选择。vue demo
UI组件 element- 饿了么出品的Vue2的web UI工具套件 Vux- 基于Vue和WeUI的组件库 mint-ui- Vue 2的移动UI元素 iview- 基于 Vuejs 的开源 UI ...
- vue怎么调用子元素的方法_vue 父组件中调用子组件函数的方法
vue 父组件中调用子组件函数的方法 在父组件中调用子组件的方法: 1.给子组件定义一个ref属性.eg:ref="childItem" 2.在子组件的methods中声明一个函数 ...
- moel vue 自定义v_vue在自定义组件中使用v-model的方法
vue如何在自定义组件中使用v-model v-model指令 所谓的"指令"其实就是扩展了HTML标签功能(属性). 先来一个组件,不用vue-model,正常父子通信 我是父亲 ...
- vue单文件props写法_vue开发中怎么按需加载需要被填入props和自定义事件的组件？...
这种场景你可能需要把模态框包装成插件.vue插件开发和组件的区别 - 水秋玄im.mkinit.com vue插件和组件的区别 使用插件的方式包装组件和直接注册全局组件其实是一样的,都是注册组件.不 ...
- [vue] 你有写过自定义组件吗？
[vue] 你有写过自定义组件吗? 写过,随便说点组件的引入问题.注册问题.传值问题吧 个人简介 我是歌谣,欢迎和大家一起交流前后端知识.放弃很容易, 但坚持一定很酷.欢迎大家一起讨论 主目录 与歌谣 ...
最新文章
- 支持 gRPC 长链接，深度解读 Nacos 2.0 架构设计及新模型
- linux中科大yum源,CentOS:国内常用的yum源
- IIS7、IIS8添加net.tcp协议报错 未将对象引用设置到对象的实例。
- GDB调试多进程|多线程程序
- android imageview 图片切换动画,在Android中以动画方式将ImageView移动到不同的位置...
- freemarker+生成java_Freemarker + xml 实现Java导出word
- Pytorch 尝试通过强化cpu使用加快训练和推理速度（二）
- 在Unity进行平台打包发布的时候需要注意的一些细节问题
- sicily 1345. 能量项链
- 如何以最低廉的价格(249元！！)组装一台Mac黑苹果主机，垃圾佬极限装机！！
- Jenkins整合Sonar
- 生产企业智能制造执行系统解决方案（MES）
- Visual Studio开发环境下的中文GBK内码获取
- Tracert命令原理
- 超出ipc连接数范围_终端服务器超出了最大允许连接数的解决办法 (全文)
- 简单两步实现安卓软件自动升级（自动升级工具类）
- cd40系列芯片_CD40,CD45系列芯片功能大全
- 北航大学计算机学院新媒体艺术系,本科优秀毕业论文参考-北航新媒体与艺术学院-北京航空航天大学.doc...
- 夺冠！小米在 IWSLT 2022国际机器同传比赛中获佳绩
- 搜索战火重燃，夸克升级个人云服务做网盘的逻辑是什么？