vue子组件和父组件双向绑定的几种方案
<!DOCTYPE html><html><head><meta charset="utf-8"><title></title></head><body><script src="https://cdn.bootcss.com/vue/2.5.16/vue.js">&...
·
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<script src="https://cdn.bootcss.com/vue/2.5.16/vue.js"></script>
<div id="app">
<div>
<span>v-model案例</span>
<new-input v-model="name"></new-input>
</div>
<hr>
<div>
<span>模仿v-model实现案例</span>
<two-model :show="showName" @input="changeShowName"></two-model>
<h3 v-show="showName">我是一串要和内部名字联动的一串文字(父组件)</h3>
<div @click="toggleShowName">父组件改变值带动(父组件)点一下试试</div>
</div>
<hr >
<div>
<span>.sync方案实现案例</span>
<three-input :name.sync="name"></three-input>
</div>
<hr>
<div id="">
<div>这是父组件的东西。利用这个框改变值,看看有没有传到子组件,也可以改子组件看看这里有变化没</div>
<input type="text" name="" id="" v-model="name" />
</div>
</div>
<script>
// v-model方案 你写上一个v-model的时候其实就是自动监听了input事件并且把取到的值赋值给当前值.
Vue.component('new-input', {
props: ['value'],
data: function() {
return {}
},
template: '<label>是个好人:<input type="text" v-model="newName" /></label>',
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: '<div><div @click="toggleShow">点击!!!显示/隐藏下方的名字可以影响父组件(子组件)</div><h1 v-show="nameShow">Army-海军(子组件)</h1></div>',
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: '<label><input type="text" @input="changeInput" v-model="newName" /> 你的名字:</label>',
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
}
}
});
</script>
</body>
</html>
直接复制到自己页面去测试即可。代码是最好读的。
更多推荐
已为社区贡献25条内容
所有评论(0)