El componente secundario pasa el valor al componente principal
1. El componente secundario pasa información al componente principal a través de un evento personalizado.
<button @ click = "sendFather"> Enviar datos a papá </button>
2. El componente principal escucha los eventos del componente secundario.
<child-my @ sonData = "getSonData"> </child-my>
Resumen: los componentes secundarios pasan valores a los componentes principales
El componente secundario activa un evento personalizado y el componente principal escucha el evento personalizado al mismo tiempo. Cuando el componente secundario activa un evento personalizado, el evento personalizado se lanza al componente principal. Cuando el componente principal activa el evento personalizado, se ejecutará el evento correspondiente.
Código de página de papá:
<template>
<div class="my-parent" style="background:#fff">
<h3>我是父组件</h3>
<p>爸爸的数据</p>
<ul>
<li>钱财：{
{fatherData.money}}</li>
<li>工作：{
{fatherData.job}}</li>
</ul>
<p>显示一下儿子给爸爸的数据</p>
<ul>
<li>{
{sunData.joy}}</li>
<li>{
{sunData.fly}}</li>
</ul>
<child-my :fatherData='fatherData' @sonData="getSonData"></child-my>
</div>
</template>
<script>
import childMy from "../../../../common/child-my.vue";
export default {
components:{childMy},
data(){
return{
fatherData:{
money:100000000,
job:'程序员'
},
sunData:{}
}
},
methods:{
getSonData(obj){
console.log(obj)
this.sunData=obj
}
}
};
</script>Código de página hijo:
<template>
<div class="my-child">
<h3>我是子组件</h3>
<p>儿子的数据:都是玩具</p>
<ul>
<li>{
{childData.joy}}</li>
<li>{
{childData.fly}}</li>
</ul>
<div>
<button @click="sendFather">发送给爸爸数据</button>
</div>
<br>
<br>
<br>
儿子继承爸爸的钱财
<p>{
{fatherData.money}}</p>
</div>
</template>
<script>
export default {
data() {
return{
childData:{
joy:'变形金刚',
fly:'直升机'
}
}
},
props:{
fatherData:Object
},
methods:{
sendFather(){
this.$emit("sonData", this.childData);
}
}
};
</script>
Resumen: el código clave de la página del hijo para pasar el valor a la página del padre
Bien, hecho, sencillo y claro código para principiantes. No tucao Daniel