vue在自定义组件中使用v-model进行数据绑定的方法
本文介绍了vuev-model进行数据绑定,分享给大家,具体如下
官方例子https://vuefe.cn/v2/api/#model
有这么一句话:默认情况下,一个组件上的v-model会把value用作prop且把input用作event。
示例:
先来一个组件,不用vue-model,正常父子通信
我是父亲,对儿子说:{{sthGiveChild}}
我是儿子,父亲对我说:{{give}}
回应
点击回应后,父亲对儿子说的话变成了儿子的回应。儿子收到的信息也变了,实现通信。
改用v-model
我是父亲,对儿子说:{{sthGiveChild}}
我是儿子,父亲对我说:{{give}}
回应
文案虽有不同,但是效果最终是一致的。
看看官方自定义组件的v-model
官方例子https://vuefe.cn/v2/api/#model
有这么一句话:默认情况下,一个组件上的v-model会把value用作prop且把input用作event。
尝试把上边子组件的例子改一下,也是跑的通的
我是儿子,父亲对我说:{{value}}
回应
做一下总结:
如果你懒,不想自己去处理事件,那就用默认的'value'&&'input'事件去处理,如果用原生事件的,甚至连model属性也可以省去。
如果你想自己的代码比较明确,区分出自定义事件,那么下面的组合才是你的菜。
prop和event看你自己心情定义,当然要知名见意【尽量避开关键字】
model:{ prop:'someProp',//注意,是prop,不带s。我在写这个速记的时候,多写了一个s,调试到怀疑人生 event:'someEvent' } this.$emit('someProp',[returnValueToParent])
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持毛票票。