单击Parent中的Button，从Child获取数据到Parent并在方法中使用它(Vue 3)

Question

我正在与Vue3和Bootstrap 5合作。

我的问题我想在我的parent.vue中加入click和button。点击这个之后，我想把child.vue中的data放到parent.vue - method的方法中。

但是我的data总是空的，除了我需要另一个' ' setTimeout"-函数。但实际上我不想用它。

我认为props Boolean也有更好的解决方案…

如果对我的问题有任何疑问，请问我!

谢谢你的帮助!

父:

<template>
<Child :triggerFunc="triggerFunc" @childData="childData"/>
<button type="button" class="btn btn-success" @click="get_data()">Get Data</button>
</template>
<script>
export default {
data() {
return {
triggerFunc: false,
c_data: [],
}
},

methods: {

childData(data) {
this.c_data = data;
},

get_data() {
this.triggerFunc = true;
setTimeout(() => {
this.triggerFunc = false;
}, 50);

console.log(this.c_data);
//HERE I WANT TO USE "C_DATA" BUT OF COURSE IT's EMPTY. WITH ANOTHER SET_TIMEOUT IT WOULD WORK 
//BUT I DON'T WANT TO USE IT. BUT WITHOUT IT'S EMPTY. 

//LIKE THIS IT WOULD WORK BUT I DON'T WANT IT LIKE THAT
setTimeout(() => {
console.log(this.c_data);
}, 50);
}
},
}
</script>

孩子:

<template>
<!-- SOME BUTTONS, INPUTS, ETC. IN HERE -->
</template>
<script>
export default {
data() {
return {
input1: "",
input2: "",
}
},

props: {
triggerFunc: Boolean, 
},

triggerFunc(triggerFunc) {
if(triggerFunc == true) {
this.save_data()
}
}

methods: {
save_data() {
var data = [
{
Input1: this.input1,
Input2: this.input2
},
]
this.$emit("childData", data);
},
},
}
</script>

Answer 1

1. 父类可以很好地保存/拥有其子类的数据。在这种情况下，子进程只呈现/显示数据。子节点需要向父节点发送事件以更新该数据。(这里父组件是Key组件，子组件是父组件的Helper。)

   所以，这里父节点总是在它自己的数据变量中有子节点数据的主副本。

2. 另外，您使用@来绑定属性，这是错误的。@用于事件绑定。对于数据绑定，使用':'，这是v-bind:

   的简写。你可以直接输入:childData=c_data

PS:你似乎有几个基本的错误。Vue是响应式的，会自动将数据绑定到变量。所以,你不需要做这么多工作。请看一些基本的Vue示例。

参考:https://sky790312.medium.com/about-vue-2-parent-to-child-props-af3b5bb59829

编辑代码:父:

<template>
<Child @saveClick="saveChildData" :childData="c_data" />
</template>
<script>
export default {
data() {
return {
c_data: [{Input1:"", Input2:""}]
}
},
methods: {
saveChildData(incomingData) {
//Either set the new value, or copy all elements.
this.c_data = incomingData;
}
},
}
</script>

孩子:

<template>
<!-- SOME BUTTONS, INPUTS, ETC. IN HERE -->
<!-- Vue will sync data to input1, input2. On button click we can send data to parent. -->
<button @click.prevent="sendData" />
</template>
<script>
export default {
props:['childData'],
data() {
return {
input1: "",
input2: "",
}
},
methods: {
sendData() {
var data = [
{
Input1: this.input1,
Input2: this.input2
},
]
this.$emit("saveClick", data); //Event is "saveClick" event.
},
},
beforeMount(){
//Make a local copy
this.input1 = this.childData[0].Input1;
this.input2 = this.childData[0].Input2;
}
}
</script>