vue之父子組件交互

父組件

<template>
  <div>
    <child show-txt="show"></child>
    <div v-if="name">name: {{ name }}</div>
    <div v-if="age">age: {{ age }}</div>
  </div>
</template>

<script>
import { Child } from "Child";
export default {
  data() {
    return {
      name: "",
      age: ""
    };
  },
  methods: {
    show(data) {
      this.name = data.name;
      this.age = data.age;
    }
  }
};
</script>

子組件

<template>
  <button @click="on_click">btn</button>
</template>

<script>
export default {
  methods: {
    on_click() {
      this.$emit("show-txt", { name: "Rabbit", age: 18 });
    }
  }
};
</script>