Vue parent component can not receive child component data, solution!
recently self-taught vue, wrote a two-way binding of parent-child components according to the online example, which only implements one-way binding. The data of the parent component cannot change with the child component, but the data of the child component can only change with the parent component. I still can"t understand the idea after reading the document on the official website for a while.
Please help me to find out what went wrong. Thank you
<!DOCTYPE html>
<html lang="en">
<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: "-sharpapp",
data: {
value: ""
},
methods: {
c_lick() {
//this.value--;
}
},
components: {
"my-com": {
template: "-sharptemplate1",
props: ["value"],
data: function () {
return {
childvalue: this.value
}
},
methods: {
f_click() {
//this.currentvaluePP;
this.$emit("input", this.childvalue);
}
},
watch: {
value(val) {
this.childvalue = val;
}
}
}
}
})
</script>
</body>
</html>
vue two-way binding, first of all, to understand the principle of one-way transmission, gradually in-depth. The father passes on ide/components.html-sharpProp" rel=" nofollow noreferrer "> props , and the son passes on the father ide/components.html-sharp%E8%87%AA%E5%AE%9A%E4%B9%89%E4%BA%8B%E4%BB%B6" rel= "nofollow noreferrer" > $emit .
it's okay to pass the value to the child in the parent, v-bind an attribute on the child component, pass the value in, and then the child accepts the attribute with props.
it's a bit complicated for a child to pass on his father. First of all, in a method methods, the child passes it to the parent with this.$emit ('attribute name', the value passed), and the parent needs to use a v-on to receive this value.
the following is two-way transmission. I wrote a note myself and shared it with you. It is very helpful for you to learn vue. Study it carefully
.
<!DOCTYPE html>
<html lang="en">
<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//propsresult--myResult
}
},
watch: {
/* */
result(val) {
this.myResult = val;//propsresultdatamyResult
},
myResult(val){
this.$emit("on-result-change",val);//myResult
}
},
methods: {
change() {
this.myResult = !this.myResult;
}
}
});
new Vue({
el: "-sharpapp",
data: {
result: true
},
methods: {
//
change() {
this.result = !this.result;
},
//
onResultChange(val){
this.result=val;//
}
}
});
</script>
</html>
No problem, you originally wrote to click on the input of the child component to synchronize the value to the parent component.
changed slightly, the code is as follows.
it's a simple question, but just take your time.
if you want to communicate from a child component to a parent component, the most commonly used code you have before is: this.$emit ('input', v).
however, the child component sends out a notification, and the parent component needs to receive it, so you receive less.
@ input= "getDataFromChild" is received like this.
you can take a look at the component communication content of VUE again.
<!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' />
</div>
<my-com v-model="value" @input="getDataFromChild"></my-com>
</div>
<template id="template1">
<div>
<span>:{{childvalue}}</span>
<input type="text" v-model='childvalue' />
</div>
</template>
<script>
new Vue({
el: '-sharpapp',
data() {
return {
value: ''
};
},
methods: {
getDataFromChild(v) {
this.value = v;
}
},
components: {
'my-com': {
template: '-sharptemplate1',
props: ['value'],
data() {
return {
childvalue: this.value
};
},
watch: {
value(val) {
this.childvalue = val;
},
childvalue(v) {
this.$emit('input', v);
}
}
}
}
})
</script>
</body>
</html>
