vue 封装组件 实现自定义双向绑定
2019-03-15 09:14
866 查看
当组件使用 value 实现了一个功能,但又需要实现双向绑定,这时就会有冲突。
通过 定义组件时的 model 选项,从而实现了自定义组件 v-model 功能。
类似编辑器的功能,可能用 v-model 的方式会更好,可以通过这种方式使用。
import Vue from 'vue' const component = { model: { prop: 'value1', event: 'change' }, props: ['value1'], template: ` <div> <input type="text" @input="handleInput" :value="value1"/> </div> `, methods: { handleInput (e) { this.$emit('change', e.target.value) } } } new Vue({ components: { CompOne: component }, el: '#root', data () { return { value: '123' } }, template: ` <div> <comp-one v-model="value"></comp-one> </div> ` })
相关文章推荐
- vue父子组件传值,实现深度监听对象,双向绑定
- 【VUE】.NET实现Tree组件双向绑定数据(3)-资源分配
- vue 自定义组件 v-model双向绑定、 父子组件同步通信
- 【VUE】.NET实现Tree组件双向绑定数据(1)
- Vue 2.0学习笔记:实现组件数据的双向绑定
- vue 自定义组件 v-model双向绑定、 父子组件同步通信的多种写法
- Vue2.0利用 v-model 实现组件props双向绑定的优美解决方案
- 【VUE】.NET实现Tree组件双向绑定数据(2)
- Vue父子组件双向绑定传值的实现方法
- angular4自定义组件非input元素实现ngModel双向数据绑定
- 探索vue父子组件实现数据双向绑定失败的原因
- Vue 组件实现表单的双向绑定
- Angular自定义组件实现数据双向数据绑定的实例
- vue父组件和子组件通过sync实现双向数据绑定
- Vue基础精讲 —— Vue的组件之组件的定义、继承、自定义双向绑定、高级属性
- angular中自定义组件实现双向绑定
- Angular2中自定义组件实现双向绑定
- Vue实现双向数据绑定
- vue数据双向绑定实现原理
- vue组件传递对象中实现单向绑定的示例