vue组件自定义v-model

转载自 vue组件，自定义v-model方法

1	`<my-component` `v-model="obj"></my-component>`

在使用my-component组件时，为了实现双向绑定。

Vue.component('my-component', {

props: {

obj: Object,

},

model: {

prop: 'obj',

event: 'change'

},

methods: {

onchange: function() {

this.$emit('change', this.obj);

}

});

上面代码中

1.props对象中，需要定义一个能够从外部传入的变量，这里我定义了一个obj。这样就可以用下面这行代码进行传递值

1	`<my-component` `:obj="obj对象"></my-component>`

2.为了能够使用v-model语法糖，我们定义了model对象。model对象包含两个属性，一个是prop，一个是event。prop默认是value，event默认是input，我们这里写model是为了改变默认的东西，使用我们自己定义的变量。写好之后就可以用下面这行代码了。

1	`<my-component` `v-model="obj对象"></my-component>`

3.虽然可以这么用，但还是不能从子组件传递数据到外部。因为change事件并没有被触发。这个change事件是我自定义的，所以这里需要写一个方法onchange。方法名是次要的，主要的是里面的那行代码。

1	`this.$emit('change', this.obj);`

这行两个参数，第一个是事件名，和model里的event属性的值要一样。第二个参数是改变的值。写第二个变量，才能改变外部的数据，实现双向绑定的功能。

文笔不行，没办法表达出清晰的思路，贴上早上翻阅的一些有用的链接，以供参考。

参考：

https://jsfiddle.net/yyx990803/58kxs8tj/

https://github.com/vuejs/vue/issues/4373

http://lizhihua.me/2016/10/31/vue/component_v-model/

vue组件自定义v-model相关推荐

vue组件通信v兄弟组件通信eventbus遇到的问题（多次触发、第一次不触发）
组件通讯包括:父子组件间的通信和兄弟组件间的通信.在组件化系统构建中,组件间通信必不可少的 (vuex以后再说). 父组件--> 子组件 1. 属性设置父组件关键代码如下: 1 <tem ...
Vue组件自定义事件
<!DOCTYPE html> <html><head><meta charset="utf-8"><script src=& ...
Vue如何自定义组件?超详细Vue自定义组件指南!使用自定义组件减少重复造轮子! ∠( °ω°)／前端知识
文章目录使用意义基础使用给组件添加属性传递事件自定义组件的v-model 剖析v-model原理使用示例插槽使用意义有时候一组HTML代码可能会在多出使用(比如页眉页脚).如果我们把 ...
使用VUE组件创建SpreadJS自定义单元格(二)
在上篇中,我们介绍了如何通过设置runtimeCompiler为true,在Vue中实现了动态创建电子表格组件.想了解具体内容可看点击查看使用VUE组件创建SpreadJS自定义单元格(一). 但是在 ...
Vue组件绑定自定义事件
Vue组件使用v-on绑定自定义事件: 可以分为3步理解: 1.在组件模板中按照正常事件机制绑定事件: template: '<button v-on:click="increment ...
简单了解Vue的自定义组件与生命周期
Vue的自定义组件定义格式 Vue.component(组件名称, { props:组件的属性, data: 组件的数据函数, template: 组件解析的标签模板 }) 代码解析(详细解释在注解 ...
Vue组件及自定义事件
目录 Vue.js 组件动态 Prop Prop 验证 Vue.js 组件 - 自定义事件 data 必须是一个函数
npm上传自定义vue组件入门
webpack版本是1.13.1 自己写的VUE组件,上传到npm,然后通过npm install xxx -S 安装到 package.json里面的 "dependencies" ...
Vue组件学习之组件自定义事件
主要介绍组件的自定义事件的概念,使用等. 何为组件自定义事件: 组件自定义事件是一种组件间的通信方式,方向是子组件====>父组件. 使用场景:A是子组件,B是父组件,如果要把B的数据传给A, ...

vue组件自定义v-model

vue组件自定义v-model相关推荐

最新文章

热门文章