寫仿豆瓣的時候經(jīng)常會遇到一個點贊的按鈕许帐，點一下贊了 它的樣式也改變了砚著，然后再點一下還可以取消敬尺。于是打算封裝一個點贊的組件
剛開始封裝的時候?qū)⒚看吸c贊和取消點贊的這個邏輯寫到了組件內(nèi)部元旬，后來再看感覺很不合理煎楣，所以重新重構(gòu)了一下。
template：
<div id="like" :class="like?'active':''" @click="change">
<span class="img"></span><span>{{count}}</span>
</div>
img是顯示的小心心的點贊圖標以现，后面是點贊數(shù)量狠怨，因為想到有些點贊按鈕可能沒有數(shù)量约啊，所以count設(shè)置為非必填項。
style：
#like{
width: 100px;
height: 30px;
line-height: 30px;
display: flex;
align-items:center;
justify-content:center;
font-size: 15px;
margin: 30px auto;
color: #42bd56;
border: 1px solid #42bd56;
}
#like .img{
margin-right: 4px;
width: 20px;
height: 20px;
background:url(https://img3.doubanio.com/f/talion/c689ab2369da387f2cb0d4da4a22614d7f048bf9/pics/card/ic_heart_green.svg) no-repeat;
}
#like.active{
color: #333;
border: 1px solid #bfbfbf;
}
#like.active .img{
background-image: url(https://img3.doubanio.com/f/talion/0129352875382ff0544020161709c2ae9b00c737/pics/card/ic_heart_red.svg);
}
樣式當時寫的是比較隨意的佣赖，點贊的小圖標是直接用的豆瓣的圖片恰矩。。
script：
分開說吧
props?
props:{
count:{
type: Number,
required: false,
},
like:{
type:Boolean,
required:true,
default:false
}
}
因為count可能沒有憎蛤，所以非必填外傅，like涉及到顯示效果，給他設(shè)置了個默認值俩檬。
正常來說其實這個組件中是不需要寫邏輯的萎胰，但是這里有個問題就是vue2.0中給自定義組件設(shè)置原生事件一定要加native修飾符，那如果使用的時候父組件忘記了呢豆胸？所以這里給這個組件設(shè)定了個點擊事件
這個change方法里其實只做了一件事
change:function () {
this.$emit('click');
}
就是觸發(fā)父組件傳遞進來的方法奥洼。
所以父組件如果這樣使用
<div class="like">
<Like-it @click="changeValue" count="15" :like="like"></Like-it>
</div>
也不會有任何問題了巷疼。
當然如果確蓖砗可以在父組件中使用@click.native來觸發(fā)原生事件，則組件的上面的操作都可以省略了嚼沿。
