Javascript Vue.js：简单单击功能未启动

我有一个非常简单的应用程序：

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

Vue.component（“页面更改”{
模板：“按钮”，
道具：[“页面”]
})
var clients=new Vue({
el:“展示”，
数据：{
currentRoute:window.location.href
},
方法：{
更改页面：函数（）{
log（“这正在工作”）
}
}
})

…但当我单击

按钮时，控制台上没有任何记录。我知道我错过了一些简单的东西，但我没有得到任何错误

当您执行以下操作时，我如何使我的click fire更改页面：

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

解决方案1：从子组件发出单击事件：

---

执行此操作的最佳方法是使用

.native

事件修饰符

例如：

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

登录

---

来源：

显然

v-on:click

使用

.native

事件修饰符似乎效果更好

---

尝试

page=“bio”v-on:click.native=“changeThePage（）”>

。这对我有用

这是启动父级的

更改页面
方法的唯一方法吗？我以为有更直接的原因route@JeremyThomas我更新了我的答案：现在您有了一个解决方案，子组件中没有emit。@Slyce另一个选择是将
changeThePage
方法传递给
page change
组件。但是你的第一种方法是典型的方法。不幸的是，这对我不起作用。它曾经在Chrome上使用
@click
，但在Safari上不使用。添加
@click.native
对这两种方法都不起作用。知道为什么吗？
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); 
       }
    }
})

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