vue如何在自定义组件中使用v-model
作者:U-FEX 时间:2024-06-07 16:03:25
v-model指令
所谓的“指令”其实就是扩展了HTML标签功能(属性)。
先来一个组件,不用vue-model,正常父子通信
<!-- parent -->
<template>
<div class="parent">
<p>我是父亲, 对儿子说: {{sthGiveChild}}</p>
<Child @returnBack="turnBack" :give="sthGiveChild"></Child>
</div>
</template>
<script>
import Child from './Child.vue';
export default {
data() {
return {
sthGiveChild: '给你100块'
};
},
components: {
Child
},
methods: {
turnBack(val) {
this.sthGiveChild = val;
}
}
}
</script>
<!-- child -->
<template>
<div class="child">
<p>我是儿子,父亲对我说: {{give}}</p>
<a href="javascript:;" rel="external nofollow" rel="external nofollow" rel="external nofollow" @click="returnBackFn">回应</a>
</div>
</template>
<script>
export default {
props: {
give: String
},
methods: {
returnBackFn() {
this.$emit('returnBack', '还你200块');
}
}
}
</script>
点击回应后,父亲对儿子说的话变成了儿子的回应。儿子收到的信息也变了,实现通信。
改用v-model
<!-- parent -->
<template>
<div class="parent">
<p>我是父亲, 对儿子说: {{sthGiveChild}}</p>
<Child v-model="sthGiveChild"></Child>
</div>
</template>
<script>
import Child from './Child.vue';
export default {
data() {
return {
sthGiveChild: '给你100块'
};
},
components: {
Child
}
}
</script>
<!-- child -->
<template>
<div class="child">
<p>我是儿子,父亲对我说: {{give}}</p>
<a href="javascript:;" rel="external nofollow" rel="external nofollow" rel="external nofollow" @click="returnBackFn">回应</a>
</div>
</template>
<script>
export default {
props: {
give: String
},
model: {
prop: 'give',
event: 'returnBack'
},
methods: {
returnBackFn() {
this.$emit('returnBack', '还你200块');
}
}
}
</script>
文案虽有不同,但是效果最终是一致的。
看看官方自定义组件的v-model
官方例子https://vuefe.cn/v2/api/#model
有这么一句话: 默认情况下,一个组件上的 v-model 会把 value 用作 prop 且把 input 用作 event。
尝试把上边子组件的例子改一下,也是跑的通的
<!-- child -->
<template>
<div class="child">
<p>我是儿子,父亲对我说: {{value}}</p>
<a href="javascript:;" rel="external nofollow" rel="external nofollow" rel="external nofollow" @click="returnBackFn">回应</a>
</div>
</template>
<script>
export default {
props: {
value: String
},
methods: {
returnBackFn() {
this.$emit('input', '还你200块');
}
}
}
</script>
做一下总结:
如果你懒,不想自己去处理事件,那就用默认的 'value' && 'input' 事件去处理,如果用原生事件的,甚至连model属性也可以省去。
如果你想自己的代码比较明确,区分出自定义事件,那么下面的组合才是你的菜。
prop和event看你自己心情定义,当然要知名见意【尽量避开关键字】
model: {
prop: 'someProp', // 注意,是prop,不带s。我在写这个速记的时候,多写了一个s,调试到怀疑人生
event: 'someEvent'
}
this.$emit('someProp', [returnValueToParent])
来源:http://%cnbcom%/ufex/p/9035269.html
标签:vue,v-model
0
投稿
猜你喜欢
浅析mysql 语句的调度优先级及改变
2024-01-24 21:27:35
SQL语句解析执行的过程及原理
2024-01-26 21:11:55
使用百度云加速后网站打开速度慢、广告不显示的解决方法
2023-04-23 19:07:24
python相对包导入报“Attempted relative import in non-package”错误问题解决
2022-02-28 12:57:05
XHTML与HTML之间的7个区别
2009-05-20 10:13:00
Django商城项目注册功能的实现
2022-01-19 05:22:36
jquery弹出层背景变暗 Lee dialog
2008-08-18 13:11:00
Vue路由模式中的hash和history模式详细介绍
2024-06-07 15:20:16
Django 博客实现简单的全文搜索的示例代码
2023-12-07 10:09:19
Python turtle绘画象棋棋盘
2022-05-06 22:48:55
ASP在线生成电话图片程序
2007-10-06 23:06:00
深入了解Python iter() 方法的用法
2023-11-05 02:12:37
Flask框架debug与配置项的开启与设置详解
2022-04-11 17:05:58
详解Python的文件处理
2022-07-16 23:46:15
Vue父子组建的简单通信之控制开关Switch的实现
2024-06-05 09:16:25
sql server如何去除数据中的一些无用的空格
2024-01-18 02:22:22
利用Python批量导出mysql数据库表结构的操作实例
2024-01-21 00:41:58
Go语言实现遗传算法的实例代码
2024-02-10 01:04:54
微信小程序实现搜索功能
2024-05-02 16:17:16
Python设计模式之外观模式实例详解
2022-01-18 16:39:37