vue组件复用时组件中的methods应该如何设置？

Question

Vue.component('alert',{
template:'<button @click="onClick">{{msg_1}}{{msg_2}}{{msg_3}}</button>',

props:['msg_1','msg_2','msg_3'],
methods:{
   onClick:function () {
       alert();
   }
}

});

new Vue({

el:'#app'

});

<div id="app">
<alert msg_1="1111111"></alert>
<alert msg_2="2222222"></alert>
<alert msg_3="3333333"></alert>
</div>

我想分别在三个组件中alert出这三个父组件传递的值，也就是1111，2222，3333.那么现在这个onclick方法应该怎么写？？还是说我这个组件的复用本身就写错了吗。。

Answer 1

onClick:function () { let content = this.msg_1 || this.msg_2 || this.msg_3 alert(content) }

Answer 2

Vue.component('alert',{ template:'<button @click="onClick">{{msg_1}}</button>', props:{ msg_1: String }, methods:{ onClick:function () { alert(this.msg_1); } } });