Vue.js：簡單的點擊功能不觸發

Question

我有一個非常簡單的應用程序：

<div id="show_vue">
    <page-change page="bio" @click="changeThePage"></page-change>
    <page-change page="health" @click="changeThePage"></page-change>
    <page-change page="finance" @click="changeThePage"></page-change>
    <page-change page="images" @click="changeThePage"></page-change>
</div>

Vue.component("page-change", {
    template: "<button class='btn btn-success'>Button</button>",
    props: ["page"]
})

var clients = new Vue({
    el: '#show_vue',
    data: {
        currentRoute: window.location.href
    },
    methods: {
        changeThePage: function() {
            console.log("this is working")
        }
    }
})

...但是當我單擊<page-change></page-change>按鈕時，控制台沒有記錄任何內容。 我知道我錯過了一些簡單的東西，但我沒有收到任何錯誤。

如何讓我的點擊觸發changeThePage

Answer 1

當你這樣做：

<page-change page="bio" @click="changeThePage"></page-change>

這意味着您正在等待page-change組件發出click事件。

最佳解決方案（感謝@aeharding）：使用 .native 事件修飾符

<page-change page="bio" @click.native="changeThePage"></page-change>

解決方案 1：從子組件發出點擊事件：

Vue.component("page-change", {
    template: "<button @click='clicked' class='btn btn-success'>Button</button>",
    props: ["page"],
    methods: {
       clicked: function(event) {
         this.$emit('click', this.page, event); 
       }
    }
})

信息event是 Vue 為原生事件傳遞的默認值，例如click : DOM 事件

解決方案 2：直接從父組件發出：

 Vue.component("page-change", { template: "<button class='btn btn-success'>Button {{ page }}</button>", props: ["page"] }) var clients = new Vue({ el: '#show_vue', data: { currentRoute: window.location.href, pages: [ 'bio', 'health', 'finance', 'images' ] }, methods: { changeThePage: function(page, index) { console.log("this is working. Page:", page, '. Index:', index) } } });

 <script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.2.5/vue.js"></script> <div id="show_vue"> <span v-for="(page, index) in pages" :key="index+page" @click="changeThePage(page, index)"> <page-change :page="page"></page-change> </span> </div>

Answer 2

最好的方法是使用.native事件修飾符。

例如：

<my-custom-component @click.native="login()">
  Login
</my-custom-component>

來源： https ://v2.vuejs.org/v2/guide/components.html#Binding-Native-Events-to-Components

Answer 3

顯然v-on:click似乎與.native事件修飾符一起工作得更好。

試試page="bio" v-on:click.native="changeThePage()"></page-change> 。 它對我有用。