Vue3的Emits Component Option和自定义渲染器

本文介绍了Vue3中如何使用自定义事件,并展示了如何避免与原生事件冲突的方法。通过实例讲解了emits选项的使用及事件传递的过程。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

Emits Component Option自定义事件

vue3中组件发送的自定义事件需要定义在emits选项中:

  • 若自定义的事件和原生事件重名则会触发两次,比如click
  • 更好的指示组件工作方式
  • 对象形式事件校验
    比如:
//子组件
<template>
 <div @click="$emit('my-click')">//将定义的事件发送给父组件
   <h3>自定义事件</h3>
 </div>
</template>

<script>
export default {
 emits: ['my-click']//这里需要写出定义的事件名
}
</script>
//父组件
<template>
  <h1>{{ msg }}</h1>
  <p>{{ counter }}</p>
  <p>{{ doubleCounter }}</p>
  <p>{{ message }}</p>
  <p ref="desc"></p>
  <ModelButton></ModelButton>
  <emits @my-click="onclick"> </emits>
</template>

<script>
import {
  reactive,
  computed,
  onMounted,
  onUnmounted,
  ref,
  toRefs,
  watch,
} from "vue";
import ModelButton from "./ModelButton.vue";
import Emits from "./Emits.vue";
export default {
  name: "HelloWorld",
  props: {
    msg: String,
  },
  components: {
    ModelButton,
    Emits,
  },
  methods: {
    onclick(){
      console.log(111);
    }
  },
  setup() {
    const { counter, doubleCounter } = user();
    const message = ref("some message");
    const desc = ref(null);
    watch(counter, (val, oldval) => {
      const p = desc.value;
      p.textContent = `from ${oldval} to ${val}`;
    });
    return { counter, doubleCounter, message, desc };
  },
};
function user() {
  const obj = reactive({
    counter: 1,
    doubleCounter: computed(() => obj.counter * 2),
  });
  let timer;
  onMounted(() => {
    timer = setInterval(() => {
      obj.counter++;
    }, 1000);
  });
  onUnmounted(() => {
    clearInterval();
  });
  return toRefs(obj);
}
</script>

若定义的事件名称和原生事件名称一样,控制台就会执行两次事件。
在这里插入图片描述

评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值