vue 3 发出警告“无关的非发射事件监听器”
vue 3 emit warning " Extraneous non-emits event listeners"
我正在尝试使用组合 API
将数据从子项发送到父项
我收到以下警告。
[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>
我认为您需要在组件中定义 emits
: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 脚本设置中你会做
const emits = defineEmits(["updatedcount"])
emits("updatedcount", store.count);
我正在尝试使用组合 API
将数据从子项发送到父项我收到以下警告。
[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>
我认为您需要在组件中定义 emits
: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 脚本设置中你会做
const emits = defineEmits(["updatedcount"])
emits("updatedcount", store.count);