最近在自学vue,照着网上例子写了一个父子组件的双向绑定，只实现了单向绑定。父组件的数据不能随子组件变化，只能是子组件数据随父组件变化；在官网看了文档一时还是无法理解其思路。
请各位前辈帮忙看看是哪里出的问题，谢谢
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>双向绑定</title>
<script src="https://cdn.jsdelivr.net/npm/vue "></script>
</head>
<body>
<div id="app">
<div>
<span>父：{{value}}</span>
<input type="text" v-model='value' v-on:click="c_lick">
</div>
<my-com v-model="value"></my-com>
</div>
<template id="template1">
<div>
<span>子：{{childvalue}}</span>
<input type="text" v-model='childvalue' v-on:click="f_click">
</div>
</template>
<script>
new Vue({
el: '#app',
data: {
value: ''
},
methods: {
c_lick() {
//this.value--;
}
},
components: {
'my-com': {
template: '#template1',
props: ['value'],
data: function () {
return {
childvalue: this.value
}
},
methods: {
f_click() {
//this.currentvalue++;
this.$emit('input', this.childvalue);
}
},
watch: {
value(val) {
this.childvalue = val;
}
}
}
}
})
</script>
</body>
</html>
慕慕森
慕尼黑8549860
相关分类