最近在自学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>
3 回答
慕慕森
TA贡献1856条经验 获得超17个赞
vue双向绑定，首先来说要搞懂单向传递的原理，逐渐深入。父传子用props,子传父用$emit。
父传子还好说，在父级里把要传入的值，在子组件上动态绑定（v-bind）一个属性，把值传进去，然后子级用props来接受这个属性。
子传父的话有点复杂，首先来说子级在一个方法methods里，用this.$emit('属性名',传的值)来传给父级，而父级需要用一个v-on来接收这个值。
下述为双向传递，我自己写了一篇笔记，分享给你，对你学习vue很有帮助，好好研读
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>baidu</title>
<script type="text/javascript" src="js/vue.js"></script>
</head>
<body>
<div id="app">
<switchbtn :result="result" @on-result-change="onResultChange"></switchbtn>
<input type="button" value="change" @click="change">
</div>
</body>
<script type="text/javascript">
Vue.component("switchbtn", {
template: "<div @click='change'>{{myResult?'开':'关'}}</div>",
props: ["result"],
data: function () {
return {
myResult: this.result//①创建props属性result的副本--myResult
}
},
watch: {
/* 此处是重点 */
result(val) {
this.myResult = val;//②监听外部对props属性result的变更，并同步到组件内的data属性myResult中
},
myResult(val){
this.$emit("on-result-change",val);//③组件内对myResult变更后向外部发送事件通知
}
},
methods: {
change() {
this.myResult = !this.myResult;
}
}
});
new Vue({
el: "#app",
data: {
result: true
},
methods: {
// 外部触发方法
change() {
this.result = !this.result;
},
// 接收
onResultChange(val){
this.result=val;//④外层调用组件方注册变更方法，将组件内的数据变更，同步到组件外的数据状态中
}
}
});
</script>
</html>
添加回答
举报
0/150
提交
取消