子组件向父组件传值

比如有一个 Children.vue 的子组件要传值给 Father.vue 的父组件，完成共需六步：

子组件 Children.vue 内容，注意里面的操作步骤：

<template>
  <div>
    <h2>子组件区域</h2>
    <!-- 第二步：得定义一个向父组件传值的方法，比如定义一个按钮，
    绑定一个点击事件，触发giveFather方法 -->
    <button @click="giveFather">giveFather</button>
  </div>
</template>
<script>
export default {
  data() {
    return {
      // 第一步：我们将要把变量 word 的值传给父组件
      word: "北极光之夜。",
    };
  },
  methods: {
    // 第三：定义子组件向父组件传值的事件方法
    giveFather() {
      // 第四步：可以通过$emit传值给父组件,第一个参数为传值的方法，第二个参数为要传递的值
      this.$emit("giveFather", this.word);
    },
  },
};
</script>

父组件 Father.vue 内容，注意里面的操作步骤：

<template>
  <div>
    <h2>父组件区域</h2>
    <hr />
    <!-- 第五步：要在引用的子组件标签里定义一个自定义事件，
    该自定义事件要写为子组件$emit的第一个参数一样,
    然后双引号里的方法可以自定义，我这就为getSon -->
    <Children @giveFather="getSon"></Children>
  </div>
</template>

<script>
// 引入子组件
import Children from "./Children.vue";

export default {
  data() {
    return {};
  },
  components: {
    Children,
  },
  methods: {
    //第六步：定义获取子组件值的方法，该方法的参数就为子组件传递过来的值
    getSon(temp) {
      // 控制台输出看看能不能获取
      console.log(temp);
    },
  },
};
</script>