前端Vue：父子组件传值

子组件向父组件传值： 

Parent.vue  

<template>
  <div>
    <h2>我是父组件</h2>

    <!-- {{ address }}由子组件提供值 -->
    <h3>我所在的地方名称是:{{ address }}</h3>

    <!-- @ok是子组件的自定义暴露事件，父组件自定义方法updateCityName赋值address变量 -->
    <span><Son @ok="updateCityName" /></span>
  </div>
</template>

<script>
import Son from "@/components/Son.vue"; //导入自组件
export default {
  name: "",
  data() {
    return {
      address: "",
    };
  },

  components: { //注册子组件
    Son,
  },

  methods: {
    updateCityName(data) {  //data形参
      this.address = data;
    },
  },
</script>

Son.vue 

<template>
  <div>
    <el-button @click="change">子组件,emit 子传父</el-button>
  </div>
</template>

<script>
export default {
  name: "",
  data() {
    return {
      address: "河南",
    };
  },

  methods: {
    change() {
      //emit这个方法向父组件暴露自定义的事件ok，父组件监听这个自定义事件ok
      this.$emit("ok", this.address);
    },
  },

};
</script>