vue父组件接收不到子组件数据，求解答！！！
最近在自学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回答
-
慕慕森
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> -
慕尼黑8549860
没啥问题啊，你本来写的就是点击子组件的input才向父组件同步值。
随时随地看视频慕课网APP
相关分类
JavaScript