vue使用$emit子组件向父组件传值

子组件

<template>
  <div>
    <div>子组件：{{mag}}</div>
    <button @click="select(text)">点击</button>
     <!-- 自定义select传递方法 ，text传递数据-->
  </div>
</template>

export default {
  // props: ["sendData"],
  data() {
    return {
      mag: "我是你儿",
      text: "儿子你好",
    };
  },
  methods: {
    select(val) {
      let data = {
        text: val,
      };
      this.$emit("add", data);//add是父组件用来接收时的事件，data是传递过去的数据
      console.log(data.text);
    },
  },
};

父组件

<template>
  <div class>
    <div ref="div">父组件：{{text}}</div>
    <one @add="name"></one>
  </div>
</template>

import one from "./emit/son.vue";

export default {
  // import引入的组件需要注入到对象中才能使用

  components: {
    one,
  },
  data() {
    // 这里存放数据
    return {
      text: "我是你爹",
    };
  },
  methods: {
    name(data) {
      this.text = data.text;
      console.log(this.text);
      this.$refs.div.innerHTML = '父组件：'+data.text;
    },
  }

运行结果
点击前
点击后