vue在自定义组件中使用v-model进行数据绑定的方法
本文介绍了vue v-model进行数据绑定，分享给大家，具体如下
官方例子https://vuefe.cn/v2/api/#model
有这么一句话： 默认情况下，一个组件上的 v-model 会把 value 用作 prop 且把 input 用作 event。
示例：
先来一个组件，不用vue-model，正常父子通信
<!-- parent -->
<template>
<p class="parent">
<p>我是父亲, 对儿子说： {{sthGiveChild}}</p>
<Child @returnBack="turnBack" :give="sthGiveChild"></Child>
</p>
</template>
<script>
import Child from './Child.vue';
export default {
data() {
return {
sthGiveChild: '给你100块'
};
},
components: {
Child
},
methods: {
turnBack(val) {
this.sthGiveChild = val;
}
}
}
</script>
<!-- child -->
<template>
<p class="child">
<p>我是儿子，父亲对我说： {{give}}</p>
<a href="javascript:;" rel="external nofollow" rel="external nofollow" rel="external nofollow" @click="returnBackFn">回应</a>
</p>
</template>
<script>
export default {
props: {
give: String
},
methods: {
returnBackFn() {
this.$emit('returnBack', '还你200块');
}
}
}
</script>
点击回应后，父亲对儿子说的话变成了儿子的回应。儿子收到的信息也变了，实现通信。
改用v-model
<!-- parent -->
<template>
<p class="parent">
<p>我是父亲, 对儿子说： {{sthGiveChild}}</p>
<Child v-model="sthGiveChild"></Child>
</p>
</template>
<script>
import Child from './Child.vue';
export default {
data() {
return {
sthGiveChild: '给你100块'
};
},
components: {
Child
}
}
</script>
<!-- child -->
<template>
<p class="child">
<p>我是儿子，父亲对我说： {{give}}</p>
<a href="javascript:;" rel="external nofollow" rel="external nofollow" rel="external nofollow" @click="returnBackFn">回应</a>
</p>
</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>
<p class="child">
<p>我是儿子，父亲对我说： {{value}}</p>
<a href="javascript:;" rel="external nofollow" rel="external nofollow" rel="external nofollow" @click="returnBackFn">回应</a>
</p>
</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])
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持小牛知识库。
-
本文向大家介绍详解vue 自定义组件使用v-model 及探究其中原理，包括了详解vue 自定义组件使用v-model 及探究其中原理的使用技巧和注意事项，需要的朋友参考一下 1、首先我们来实现自定义组件中使用v-model 父组件中注册子组件 子组件接收父组件传值 2.探究v-model 在input中的v-model功能是实现数据的双向绑定，即绑定name值及改变值。 工作等同于以下代码: v
-
本文向大家介绍利用Vue v-model实现一个自定义的表单组件，包括了利用Vue v-model实现一个自定义的表单组件的使用技巧和注意事项，需要的朋友参考一下 功能描述: 通过点击按钮,可以增减购物数量 组件名称是 CouterBtn 最终效果如下 我们使用 vue-cli搭建基本的开发环境,这也是最快的进行 .vue组件开发的方式 对于入口组件 App.vue (可以暂时忽略其他细节,我们
-
本文向大家介绍vue中v-model对select的绑定操作，包括了vue中v-model对select的绑定操作的使用技巧和注意事项，需要的朋友参考一下 1、单选时 如果 v-model表达式的value初始值未能匹配任何选项，<select> 元素将被渲染为“未选中”状态。在 iOS 中，这会使用户无法选择第一个选项。因为这样的情况下，iOS 不会触发 change 事件。因此，更推荐像上面这
-
本文向大家介绍详解VUE自定义组件中用.sync修饰符与v-model的区别，包括了详解VUE自定义组件中用.sync修饰符与v-model的区别的使用技巧和注意事项，需要的朋友参考一下 .sync修饰组件 v-model修饰组件 区别只能自己慢慢体会,个人感觉 .sync用法灵活,而v-model只能接受prop名为为value的值. 两者都需要手动触发$emit方法. 以上就是本文的全部内容，
-
使用 v-model 指令，可以建立数据到模板的双向绑定。本质上它是如下写法的语法糖： <input v-model="value" /> => <input value={{ self.value }} ev-input={function(e) { self.value = e.target.value; this.update(); }.bind(this)} /
-
本文向大家介绍Vue循环中多个input绑定指定v-model实例，包括了Vue循环中多个input绑定指定v-model实例的使用技巧和注意事项，需要的朋友参考一下 Vue.js中提供了v-model可以双向绑定表单元素,这个方法可以非常方便的获得输入的值,但是有时候表单元素需要循环生成,在循环中要怎样获得指定输入框的值呢 这里介绍两种： 一种是v-for中循环生成的输入框, 一种是在eleme