vue 子组件给父组件传值demo

子组件向父组件传值

1.子组件通过自定义事件向父组件传递信息

<button @click="sendFather">发送给爸爸数据</button>

2.父组件监听子组件的事件

<child-my @sonData="getSonData"></child-my>

总结：子组件向父组件传值

子组件触发一个自定义事件父组件同时去监听该自定义事件当子组件触发自定义事件的时候，会把自定义事件抛向父组件，父组件触发自定义事件的时候会执行对应的事件

爸爸页面代码：

<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>

儿子页面代码：

<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>

总结：儿子页面给爸爸页面传值的关键代码

好了，完工，直白而有明了的小白级代码。大牛不要吐槽

vue 子组件给父组件传值demo

猜你喜欢