vue 3 发出警告无关的非发射事件侦听器" [英] vue 3 emit warning " Extraneous non-emits event listeners"

查看:276
本文介绍了vue 3 发出警告无关的非发射事件侦听器"的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!

问题描述

我正在尝试使用组合 API 将数据从子级发送到父级

我收到以下警告.

<块引用>

[Vue 警告]:无关的非发射事件侦听器 (updatedcount) 已传递给组件,但无法自动继承,因为组件呈现片段或文本根节点.如果侦听器仅用作组件自定义事件侦听器,请使用发出"来声明它.option.at <HelloWorld onUpdatedcount=fn >在

childcomponent.vue

<模板>

{{ store.count }}

<button @click="fired">点击我</button></模板><脚本>从../store/store.js"导入useStore;导出默认{名称:HelloWorld",设置(_,{发出}){const store = useStore();const 发射 = () =>{store.count++;发射(更新计数",store.count);};返回 {店铺,被解雇};},};

父组件.vue

<模板><div>{{ 你好 }}<br/><br/><输入类型=文本"v-model="hello.searchQuery";/><br><br><button @click="hello.count--">也点击我!</button><hello-world @updatedcount="mydata";/>

</模板><脚本>从./components/HelloWorld.vue"导入HelloWorld;从./store/store.js"导入useStore;导出默认{成分: {你好,世界,},设置() {const hello = useStore();函数 mydata(事件){控制台日志(事件);}返回 {你好,我的数据};},};

解决方案

我认为您需要在组件中定义 emits:https://v3.vuejs.org/guide/component-custom-events.html#defining-custom-events

出口默认{名称:HelloWorld",发出: [updatedcount"],//<--- 添加这一行设置(_,{发出}){...},};

I am trying to emit data from child to parent using the composition API

I get the following warning.

[Vue warn]: Extraneous non-emits event listeners (updatedcount) were passed to component but could not be automatically inherited because component renders fragment or text root nodes. If the listener is intended to be a component custom event listener only, declare it using the "emits" option.at <HelloWorld onUpdatedcount=fn > at

childcomponent.vue


<template>
  <h1>{{ store.count }}</h1>
  <button @click="fired">click me</button>
</template>

<script>
import useStore from "../store/store.js";
export default {
  name: "HelloWorld",
  setup(_,{ emit }) {
    const store = useStore();

    const fired = () => {
      store.count++;
      emit("updatedcount", store.count);
    };

    return {
      store,
      fired
    };
  },
};
</script>


parentcomponent.vue


<template>
  <div>
    {{ hello }}
    <br />
    <br />
    <input type="text" v-model="hello.searchQuery" />
    <br><br>
    <button @click="hello.count--">click me too!</button>
    <hello-world @updatedcount="mydata" />
  </div>
</template>

<script>
import HelloWorld from "./components/HelloWorld.vue";
import useStore from "./store/store.js";

export default {
  components: {
    HelloWorld,
  },
  setup() {
    const hello = useStore();

    function mydata(event) {
      console.log(event);
    }

    return {
      hello,
      mydata
    };
  },
};
</script>

解决方案

I think you need to define the emits in your component: https://v3.vuejs.org/guide/component-custom-events.html#defining-custom-events

export default {
  name: "HelloWorld",
  emits: ["updatedcount"], // <--- add this line
  setup(_,{ emit }) {
    ...
  },
};

这篇关于vue 3 发出警告无关的非发射事件侦听器"的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!

查看全文
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆