亚洲在线久爱草,狠狠天天香蕉网,天天搞日日干久草,伊人亚洲日本欧美

為了賬號安全,請及時綁定郵箱和手機立即綁定
已解決430363個問題,去搜搜看,總會有你想問的

vue 3 發出警告“無關的非發射事件監聽器”

vue 3 發出警告“無關的非發射事件監聽器”

繁星淼淼 2023-04-20 16:40:11
我正在嘗試使用組合 API 將數據從子項發送到父項我收到以下警告。[Vue 警告]:無關的非發射事件偵聽器 (updatedcount) 已傳遞給組件但無法自動繼承,因為組件呈現片段或文本根節點。如果偵聽器僅用作組件自定義事件偵聽器,請使用“emits”選項聲明它。在 <HelloWorld onUpdatedcount=fn > at子組件.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>父組件.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>
查看完整描述

4 回答

?
心有法竹

TA貢獻1866條經驗 獲得超5個贊

我認為您需要emits在組件中定義:

export default {

? name: "HelloWorld",

? emits: ["updatedcount"], // <--- add this line

? setup(_,{ emit }) {

? ? ...

? },

};


查看完整回答
反對 回復 2023-04-20
?
滄海一幻覺

TA貢獻1824條經驗 獲得超5個贊

更新:


在 vue 3 腳本設置中你會做


const emits = defineEmits(["updatedcount"])


emits("updatedcount", store.count);


查看完整回答
反對 回復 2023-04-20
?
牛魔王的故事

TA貢獻1830條經驗 獲得超3個贊

當在我自己的 vue 3 應用程序中看到此錯誤時,我發現將組件的模板內容包裝在一個空的 div 中可以解決我認為與錯誤消息的“無法自動繼承”部分有關的問題。


似乎 vue 的工作方式是 vue 將嘗試對 @click 和 @input 等常見事件使用屬性繼承以傳遞給底層元素,但是當組件的根部有多個同級元素時,它不知道要傳遞哪個選擇。


請注意,這些事件可能會改變某些行為,因為新的包裝父 div 現在將直接綁定到它的事件。


<template>

  <div>

    <h1>{{ store.count }}</h1>

    <button @click="fired">click me</button>

  </div>

</template>


查看完整回答
反對 回復 2023-04-20
?
慕虎7371278

TA貢獻1802條經驗 獲得超4個贊

在 vue3 中你必須定義 emits,你的子組件看起來像這樣:


子組件.vue:


    <template>

      <h1>{{ store.count }}</h1>

      <button @click="fired">click me</button>

    </template>

    

    <script>

    import useStore from "../store/store.js";

    export default {

      name: "HelloWorld",

      emits :{

          updatedcount: null, <--- add this lines

        },

      data: () => ({

            store: useStore(),

      }),

      methods:

        fire () {

          store.count++;

          this.$emit("updatedcount", store.count);

        },

      

    };

    </script>


查看完整回答
反對 回復 2023-04-20
  • 4 回答
  • 0 關注
  • 327 瀏覽
慕課專欄
更多

添加回答

舉報

0/150
提交
取消
微信客服

購課補貼
聯系客服咨詢優惠詳情

幫助反饋 APP下載

慕課網APP
您的移動學習伙伴

公眾號

掃描二維碼
關注慕課網微信公眾號