鍍金池/ 問答/PHP/ vue組件復(fù)用時組件中的methods應(yīng)該如何設(shè)置？

vue組件復(fù)用時組件中的methods應(yīng)該如何設(shè)置？

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.那么現(xiàn)在這個onclick方法應(yīng)該怎么寫？？還是說我這個組件的復(fù)用本身就寫錯了嗎。。

回答
編輯回答
久礙你

再引入組件標(biāo)簽里面寫一個name='XXXX'做標(biāo)記,然后在組件里面做判斷,if (this.name='xxxx'){==>進行不同的操作}

2017年11月16日 03:42
編輯回答
雨蝶

如果我理解得沒錯的話, 你不需要接受3個prop的, 每個組件實例都是獨立的.

Vue.component('alert', {
    props: ['msg'],
    template: '<button @click="alert(msg)">{{msg}}</button>'
})
2017年3月31日 22:10
編輯回答
扯不斷
Vue.component('alert',{
template:'<button @click="onClick">{{msg_1}}</button>',

props:{
    msg_1: String
},
methods:{
   onClick:function () {
       alert(this.msg_1);
   }
}
});
2017年8月6日 09:56
編輯回答
柒槿年
 onClick:function () {
    let content = this.msg_1 || this.msg_2 || this.msg_3
    alert(content)
 }
2018年1月25日 08:02