newshow 和 comment子组件之间的参数传递

• 熟悉核心

//1.因为是父子关系不需要跳转，所以不需要在index.js里面配置了，直接在父亲里面导入儿子就可以了
<comment :artid="newsid"></comment>
import comment from '../subcom/comment.vue';
 components:{
           //评论组件，前面是es6写法，后面是es5
          comment // comment:comment
      }
//2.参数传递
     怎么传递id到子组件？
     在comment中定义props:['artid']
     在newshow中的data定义newsid，并且在钩子函数中初始化this.newsid = this.$route.params.newsid，并且在<comment :artid="newsid"></comment>，这样就可以拿到newsid了
//3. 怎么获得用户输入的内容   
    在输入框加入 <textarea ref="commentContent" placeholder="请输入要评论的内容.."></textarea>
    var txt = this.$refs.commentContent.value;
//4.点击事件
 <mt-button type="danger" size="large" @click="sendMessage">发表</mt-button>
<mt-button type="danger" size="large" @click="getMore">加载更多....</mt-button>
//5.提交评论，获取评论，获得更多评论的逻辑
data初始化的数据： comments:[],pageindex :1 //分页的页码控制变量
发表评论：sendMessage()  怎么获取内容/POST提交，要加上id，清除文本框内容/ 将原来的评论清除，重新加载，加载一页就可以了，要看更多，客户自己点
获取评论：getMessage(pageindex) 要加上pageindex，初始是1，获得数值是数组和comments相加，然后页面遍历comments/ created的时候  this.getMessage(this.pageindex);
加载更多： getMore()   this.pageindex ++;/ this.getMessage(this.pageindex);

• 创建newshow组件

<template>
    <div class="tmpl">
        <!-- 1.0 标题 -->
        <div class="twarp">
            <h2 v-text="info.title"></h2>
            <span class="desc">
                {{info.add_time  | datefmt}}  
                {{info.click}}次浏览
                 分类:民生
            </span>
        </div>
        <!-- 2.0 新闻详细展示区域 -->
        <div class="content" v-html="info.content"></div>
        <!-- 3.0 评论组件 -->
        <comment :artid="newsid"></comment>
    </div>
</template>
<script>
//导入提示框功能
import { Toast } from 'mint-ui';
// 1.0 导入评论组件对象
import comment from '../subcom/comment.vue';
    export default{
        data(){
            return {
                info:{},
                newsid:0
            }
        },
        methods:{
            getinfo(){
                // 1.0 获取url传入的newsid
                var newsid  = this.$route.params.newsid;
                // 2.0 ajax请求
                this.$http.get(common.apiDomain+'/api/getnew/'+newsid)
                .then(res=>{
                    if(res.body.status !==0){
                        Toast(res.body.message);
                        return;
                    }
                 //3.0将获取的信息赋值给info
                    this.info = res.body.message[0];
                });
            }
        },
        created(){
            // 初始化newsid
            this.newsid = this.$route.params.newsid;
            //钩子函数，执行ajax
            this.getinfo();
        },
        components:{
             //评论组件，前面是es6写法，后面是es5
            comment // comment:comment
        }
    }
</script>
<style scoped>
    .twarp h2{
        color:#0094ff;
        font-size:16px;
    }
    .twarp .desc{
        color:rgba(0,0,0,0.4);
        
    }
    .twarp{
        padding:10px;
        border-bottom: 1px solid rgba(0,0,0,0.4); 
    }
    .content{
        padding:5px;
    }
</style>

• 创建comment 组件

<!-- 评论组件 -->
<template>
    <div class="tmpl">
        <div class="title">
            <h2>提交评论</h2>
        </div>
        <div class="postcomment">
            <textarea ref="commentContent" placeholder="请输入要评论的内容.."></textarea>
            <mt-button type="danger" size="large" @click="sendMessage">发表</mt-button>
        </div>
        <div class="list">
            <h2>评论列表</h2>
            <ul>
                <li v-for="item in comments" >
                    {{item.content}}
                </li>
            </ul>
            <mt-button type="danger" size="large" @click="getMore">加载更多....</mt-button>
        </div>
    </div>
</template>
<script>
import common from '../../kits/common.js';
import { Toast } from 'mint-ui';
export default{
    data(){
        return {
            comments:[],
            pageindex :1 //分页的页码控制变量
        }
    },
    props:['artid'],
    methods:{
        // 1.0 提交评论
        sendMessage(){
            // 1.0 获取提交内容
            var txt = this.$refs.commentContent.value;

            // 2.0 发出ajax的post请求
            var url = common.apiDomain+'/api/postcomment/'+this.artid;
            this.$http.post(url,{content:txt},{emulateJSON:true})
            .then(res=>{
                Toast(res.body.message);

                // 清楚文本框内容
                this.$refs.commentContent.value = '';
            });

            this.comments =[];
            // 3.0 刷新当前artid对应的评论列表数据
            this.getMessage(1);
        },
        // 2.0 获取评论
        getMessage(pageindex){
            var url = common.apiDomain+'/api/getcomments/'+this.artid+'?pageindex='+pageindex;

            this.$http.get(url).then(res=>{
                if(res.body.status !==0){
                    Toast(res.body.message);
                    return;
                }

                this.comments = this.comments.concat(res.body.message);
            });
        },
        // 3.0 加载更多
        getMore(){
            // 1.0 每点击一个加载跟多按钮就将this.pageindex 自增1
            this.pageindex ++;
            // 2.0 获取新的页码中的数据
            this.getMessage(this.pageindex);
        }
    },
    created(){
        this.getMessage(this.pageindex);
    }
}   
</script>
<style scoped>
    .title{
        border-bottom: 1px solid rgba(0,0,0,0.4);
    }
    .postcomment{
        margin-top: 5px;
        padding: 5px;
    }
</style>