一、简介
- 通常在开发的时候，随处使用到
v-model进行数据双向绑定
<input v-model="name">
- 等价于
<input :value="name" @input="value = arguments[0]">
- 这里通过
计算属性的get()、set()实现数据的双向绑定
1、组件内部可以接收并同步父组件传入的value值
2、组件内部可以在该双向绑定值修改时emit一个input事件
二、JS 实现自定义组件 v-model 双向绑定
custom-input.vue通过计算属性进行双向绑定
<template> <input type="text" v-model="currentValue" :placeholder="placeholder" /> </template> <script> export default { props: { // 占位符 placeholder: { type: String, default: () => '' }, // 当前组件值 value: { type: Object, default: () => '' } }, computed: { // 通过计算属性进行双向绑定 currentValue: { get () { return this.value }, set (newVal) { // emit 一个 input 事件出去则会修改掉 v-model 的值，vue 自动处理的，只管抛出去新的值即可。 this.$emit('input', newVal) } } } } </script>
Home.vue使用
<template> <div> <custom-input v-model="customValue"></custom-input> {{ customValue }} </div> </template> <script> import CustomInput from './custom-input' export default { components: { CustomInput }, data () { return { customValue: '' } } } </script>
- demo 效果
