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：从子组件发出click事件：

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 event

解决方案2：直接从父组件发出：

＆＃13;

＆＃13;

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)
        }
    }
});

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;

Answer 2

执行此操作的最佳方法是使用remote: Invalid username or password. If you log in via a third party service you must ensure you have an account password set in your account profile. fatal: Authentication failed for 'https://username:password@bitbucket.org' 事件修饰符。

例如：

.native

来源：https://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>。它为我工作。