点赞

父组件里面直接

引用一个子组件

 <comment     v-bind:list="artcommentList"     @post="writemsg" @zan2="zan2" @zan3="zan3" v-if="title!=''" />

                                    这个是data里面从接口里获取的内容                     @zan2， @zan3是自己命名的。传给子组件的

因为这里面有很多点赞都访问的一个接口，只是传的类型不一样。所以可以写一个可以供公共使用的方法。其他的调用它

 zan(lid,id,type, fun) {
                // lid  0-文章，1-评论，2-作者回复       id 文章id，评论rid，作者回复 rid    点赞 type=0,取消点赞type=1  
                this.$api("Article/onlike", {lid,id,type}).then(fun);
            },

 zan2(db) {//评论的赞
                var p = db.pre == 0;
                db.pre = p ? 1 : 0;
                this.zan(1, db.rid,p==true?0:1, num => {   //这里是访问上面的那个公共zan的方法。
                    db.p_num = num.p_num;
                });
            },

下面是comment.vue的子组件

<li class="mui-table-view-cell mui-media" v-for="db in list">

<h6 @tap="$emit('zan2',db)">{{db.vname}} <span class="mui-pull-right"><img :src="'img/like'+db.pre+'.png'" class="like"  /> {{db.p_num}}</span></h6>

</li>         emit是子组件传给父组件，把这个db传到父组件的的zan2里面。

下面是比较完整的内容

父组件：

 <comment v-bind:list="artcommentList" @post="writemsg" @zan2="zan2" @zan3="zan3" v-if="title!=''" />

import comment from '../public/comment'

    mounted(){   },

    components: {comment},

 data(){
        return{

                     artcommentList:[],//评论

            id:0,

             pre:'',

           }

 },

 methods:{

     zan(lid,id,type, fun) {
                // lid  0-文章，1-评论，2-作者回复       id 文章id，评论rid，作者回复 rid    点赞 type=0,取消点赞type=1  
                this.$api("Article/onlike", {lid,id,type}).then(fun);
            },
            zan1() {//文章的赞
                this.zan(0,this.id,this.pre, num => {
                    this.read_like = num.like_num;
                    var p = this.pre == 0;
                    this.pre = p ? 1 : 0;
                });
            },
            zan2(db) {//评论的赞
                var p = db.pre == 0;
                db.pre = p ? 1 : 0;
                this.zan(1, db.rid,p==true?0:1, num => {
                    db.p_num = num.p_num;
                });
            },
            zan3(db) {//回复的赞
                var p = db.hre == 0;
                db.hre = p ? 1 : 0;
                this.zan(2, db.rid,p==true?0:1, num => {
                    db.h_num = num.h_num;
                });
            },

子组件

 <ul class="mui-table-view list clear">
                <li class="mui-table-view-cell mui-media" v-for="db in list">
                    <a href="javascript:void(0)" @tap="link(db)">
                        <img class="mui-media-object mui-pull-left" :src="db.head_url" />
                        <div class="mui-media-body">
                            <h6 @tap="$emit('zan2',db)">{{db.vname}} <span class="mui-pull-right"><img :src="'img/like'+db.pre+'.png'" class="like"  /> {{db.p_num}}</span></h6>
                             <div style="word-break: break-all;">{{db.rcontent}}</div>
                            <p class='mui-ellipsis'>{{db.rtime |timeago}}</p>
                            <div class="author" v-if="db.hcontent!=''">
                                <h5  @tap="$emit('zan3',db)">作者回复<span class="mui-pull-right">
                                    <img :src="'img/like'+db.hre+'.png'" class="like" /> {{db.h_num}}</span></h5>
                                <div style="word-break: break-all;">{{db.hcontent}}</div>
                                <p class='mui-ellipsis'>{{db.htime |timeago}}</p>
                            </div>
                        </div>
                    </a>
                </li>
            </ul>

export default { 
        props: ["list"],  //这个list是父组件传过来的,也就是artcommentList这个字段
    }