vue2和vue3 emit使用区别

最新推荐文章于 2024-04-20 10:37:23 发布

晚风吹心事

最新推荐文章于 2024-04-20 10:37:23 发布

阅读量86

点赞数 2

文章标签：前端 javascript vue

本文链接：https://blog.csdn.net/Frazier1995/article/details/133276308

版权

vue2 使用示例

// 子组件
<template>
  <div></div>
</template>
<script>
export default {
  data() {
    return {
      name: 'zxc'
    };
  },
  methods: {
    init() {
      this.$emit("complete", this.name);
    }
  }
};

// 父组件
<template>
  <div>
    <Child @complete="complete"></Child>
  </div>
</template>
 
<script>
import Child from "./Child.vue";
export default {
  methods: {
    complete(val) {
      console.log('11', val) // zxc
    }
  }
}
</script>

vue3 使用示例

// 子组件
<template>
    <div></div>
</template>

<script setup>
const emit = defineEmits(['func'])
const dateChange = (time) => {
    emit('func', time)
}
<script/>

// 父组件
<template>
    <head @func="getTime"/>
</template>

<script setup>
import head from "./head";
const getTime = (time) => {
   console.log(time)
}
<script/>