//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);
<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>
<!-- 评论组件 -->
<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>
