子组件向父组件传值

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

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

<template>
  <div>
    <h2>子组件区域h2>
    
    <button @click="giveFather">giveFatherbutton>
  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 />
    
    <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>