【Vue】通过自定义组件事件绑定，让【父组件】获取【子组件】的值（emit方式，图文+代码示例）

 1、子组件School.vue

<template>
  <!-- 组件一 -->
  <div class="demo">
    <h2>---------【School.vue】子组件---------</h2>
    <h2>学校名称：{{ schoolName }}</h2>
    <h2>学校地址：{{ address }}</h2>
        <button @click="showName1">点击把【学校和地址】传给父组件</button>
           <h2></h2>
  </div>
</template>

<script>
// 把组件暴露出去，方便引入  Vue.extend可以省略
export default {
  // eslint-disable-next-line vue/multi-word-component-names
  name: "School",
  data() {
    return {
      schoolName: "清华大学",
      address: "北京",
    };
  },
  methods: {
    showName1() {
      this.$emit('getInfo',this.schoolName,this.address);
      // alert("ok");
    },
  },
};
</script>

<style>
.demo {
  background-color: antiquewhite;
  border: 1px red solid;
  padding-left: 10px;
}
</style>

2、父组件App.vue

 

<template>
  <div id="myapp">
    <School @getInfo="getInfo"> </School>
    <h2>---------【App.vue】父组件---------</h2>
    <h2>学校名称：{{ appSchoolName }}</h2>
    <h2>学校地址：{{ appAddress }}</h2>
   </div>
</template>

<script>
// 引入组件
import School from "@/components/School.vue";

// 注册组件
export default {
  name: "App",
  components: {
    School,
  },
  data() {
    return {
      appSchoolName:"",
      appAddress: "",
    };
  },
  methods: {
    getInfo(a,b) {
      
      
      this.appSchoolName=a;
      this.appAddress=b;
      
      // --------- 可以往数组里边放了
    },

  },
};
</script>

<style scoped>
#myapp {
  border: 1px rgb(134, 0, 0) dashed;
  /* height: 400px; */
  padding-top: 20px;
  padding-left: 10px;
  /* background-color: aqua; */
}

</style>