2020-12-02

<template>
  <div class="fatherToChild">
    <h3>方式二:父组件调用子组件的方法进行传值</h3>
    <!--用ref给子组件起个名字-->
    <child ref="child"></child>
    <button @click.stop="clickFather">点击父组件</button>
  </div>
</template>
<script>
import child from "./son";
export default {
  name: "fatherToChild",
  components: {
    child
  },
  data() {
    return {
      msg: { id: 1, name: "muzidigbig", age: 23, sex: "男" }
    };
  },
  methods: {
    clickFather() {
      //调用子组件的方法，child是上边ref起的名字，emitEvent是子组件的方法。
      this.$refs.child.emitEvent(this.msg);
    }
  }
};
</script>

 

<template>
  <div class="child">
    <p v-if="msg1.id">{{msg1}}</p>
  </div>
</template>
<script>
export default {
  name: "child",
  data() {
    return {
      msg1: {}
    };
  },
  methods: {
    emitEvent(msg1) {
      this.msg1 = msg1;
      console.log(msg1); //接收的数据--------->我是父组件中的数据
    }
  }
};
</script>