首页 > itarticle > vue 向父级组件发送消息

vue 向父级组件发送消息

admin 11月 14, 2020 0

Contents

组件内用$emit定义事件名称，传递参数

<template>
  <p @click="run">textComponent 组件</p>
</template>
<script>
export default {
  name: "test",
  data () {
    return {
      content: "哈哈"
    };
  },
  methods: {
    run () {
      this.$emit("textEmit", this.content);
    }
  }
};
</script>

父组件调用事件，获得组件传递的数据


<template>
  <div>
    <du-s @textEmit="text"></du-s>
</div>  
  </div>
</template>
<script>
export default {
  methods: {
    text (q) {
      console.log(q);
    }
  }
};

结果输出为：哈哈