仅供自己查找使用,逻辑不通顺,估计只自己能看懂。。。。。
自定义input组件
vue中的
v-model='somevalue'
相当于
<标签名 v-bind:value='somevalue' v-on:input='somevalue=$event.target.value'></标签名>
因此,若想要自定义input组件,通过以下方式实现。
<div id='vueDemo'><child v-model='message'></child>
<script>
var vueTest=new Vue({
el:'#vueDemo',
data:{message:''},
})</script>
Vue.component('child',{
template:'<input v-on:input="clickEvent" ref="input" v-model="message">',
data:function(){return {message:'a message'}},
methods:{clickEvent:function(){
console.log(this.message)
this.$emit('input',this.$refs.input.value)}}
})