为什么 Vue3 按钮点击事件没有触发它的事件处理程序

Question

我在 google chrome 扩展中使用 Vue3 定义了触发事件，如下所示：

<template>
  <div id="reddwarf-translate-app">
    <div id="translate-btn">
      <button type="button" class="translate-pop-button" @click="translate">
        <span class="reddwarf-btn-icon"></span>
      </button>
        <button v-on:click="add">Add 1</button>

    </div>
    <div id="pop-container">
      <div id="translate-panel">
        <div class="header"></div>
        <div class="body"></div>
      </div>
    </div>
  </div>
</template>

<script>
import { doTranslate } from "@/public/action/TransAction";
import { MessageType } from "@/model/message/MessageType";
import { defineComponent } from "vue";

export default defineComponent({
  props: {
    word: String,
  },
  setup(props) {
    if (props && props.word && props.word.trim().length > 0) {
      
    }
  },
  methods:{
    translate(){
      alert("do translate");
      const transWord = computed(() => getters["Trans/getTransWord"])
      if (transWord && transWord.value && transWord.value.trim().length > 0) {
        doTranslate(transWord.value.trim(),MessageType.SELECTION_TRANSLATE);
      }
    },
    add(){
      alert("do add");
    }
  }
});
</script>

当我点击这两种类型的按钮时，都没有触发事件（两个函数都没有显示警告消息），为什么会这样？我错过了什么吗？我应该怎么做才能使触发事件起作用？我试图用相同的代码块做一个最小的例子，它工作正常。我想可能是 google chrome 扩展环境问题。我已将此组件加载到 google chrome 扩展 v3 脚本中，如下所示：

export async function addTransShowElement(translation:string){
  let anchorElementId = "uniq-anchor-point";
  let anchorElement = document.getElementById(anchorElementId);
  if (anchorElement == null || anchorElement === undefined) {
    let reddwarfTranslateDiv = document.createElement("div");
    reddwarfTranslateDiv.id = anchorElementId;
    document.body.appendChild(reddwarfTranslateDiv);
  }
  let appElement = document.getElementById("reddwarf-translate-app");
  if (appElement == null || appElement === undefined) {
    let props = {
      word: translation.toString().trim(),
    };
    const app = createApp(TranslatorPop, props);
    app.use(store);
    let vm = app.mount("#uniq-anchor-point");
    document.body.appendChild(vm.$el);
  }
}

TranslatorPop 是我定义的组件。我试过这样的另一种方式：

setup(props) {
    const add = () => {
      alert("do add");
    }
    
    return(
      add
    );
  },

这样就可以了。为什么功能设置有效但方法无效？

Answer 1

您正在混合选项 API (methods) 和组合 API (setup)，坚持适合您需要的一种。在 Composition API 中，您可以像在上一个代码片段中那样定义设置中的方法，这就是它的工作原理。如果要使用选项 API，请不要定义 setup，而是定义 data 和 methods:
https://v3.vuejs.org/guide/composition-api-introduction.html#basics-of-composition-api
对比
https://v3.vuejs.org/guide/data-methods.html#data-properties

为什么 Vue3 按钮点击事件没有触发它的事件处理程序

Why the Vue3 button click event did not trigger it's event handler

typescript

vuejs3