v-model案例
模仿v-model实现案例
我是一串要和内部名字联动的一串文字(父组件)
.sync方案实现案例
// v-model方案 你写上一个v-model的时候其实就是自动监听了input事件并且把取到的值赋值给当前值.
Vue.component('new-input', {
props: ['value'],
data: function() {
return {}
},
template: '是个好人：',
methods: {},
computed: {
newName: {
get() {
return this.value;
},
set(value) {
this.$emit('input', value);
}
}
}
});
// 模拟v-model 他的意义在于没有里边没有input框也想实现这种,用在组件需要显示关闭的时候比较方便
// 这个意义重大.
Vue.component('two-model', {
props: ['show'],
data: function() {
return {
}
},
template: '
Army-海军(子组件)
methods: {
toggleShow() {
this.nameShow =!this.nameShow
}
},
computed: {
nameShow: {
get() {
return this.show;
},
set(value) {
this.$emit('input', value);
}
}
}
});
// 这里必须监听这个 update:name这个事件这个时候才能这样子写:name.sync="name"
// 同时要加上在子组件里监听这个变量.否则只能子组件改变父组件,不能双向绑定
// 还是用v-model更好理解和方便些吧
Vue.component('three-input', {
props: ['name'],
data: function() {
return {
newName: this.name
}
},
template: ' 你的名字：',
methods: {
changeInput(val) {
this.$emit("update:name", this.newName);
}
},
computed: {},
watch: {
name() {
this.newName = this.name;
}
}
});
new Vue({
el: '#app',
data: {
name: 'Army-海军',
showName: true
},
methods: {
getNewName: function(newName) {
this.name = newName;
},
changeShowName(val) {
this.showName = val;
},
toggleShowName() {
this.showName = ! this.showName
}
}
});
直接复制到自己页面去测试即可。代码是最好读的。
)
函数详解)
使用)
