vue基础四（comment实例）

todos案例

App组件为总组件， 顶部header组件, add组件是左边的内容，添加评论，list组件是右边的评论回复， item组件是list的子组件

 

App组件

<template>
  <div id="app">
    <div>
      <header class="site-header jumbotron">
        <div class="container">
          <div class="row">
            <div class="col-xs-12">
              <h1>请发表对Vue的评论</h1>
            </div>
          </div>
        </div>
      </header>
      <div class="container">
        <!-- 数据在属性中传递，爷爷传父亲，父亲传儿子 -->
        <Add :addComment="addComment"></Add>
        <List :comments="comments" :deleteComment="deleteComment"></List>
      </div>
    </div>
  </div>
</template>

<script>
//引入子组件,从src文件夹下找
import Add from '@/components/Add'
import List from '@/components/List'
export default {
  name: "App",
  //注册组件
  components:{
    Add,
    List
  },
  data(){
    return {
      comments:[
        //定义数组的数据，给li使用
        {id:1,content:'Vue很666',username:'AAA'},
        {id:2,content:'Vue很牛逼',username:'bbb'},
        {id:3,content:'Vue还行',username:'ccc'},
      ]
    }
  },
  methods:{
    
    addComment(comment){
      //在数组顶部添加一个对象
      this.comments.unshift(comment)
    },
    deleteComment(index){
      //删除一个对象
      this.comments.splice(index,1)
    }
  }

};
</script>

<style scoped>
</style>

 

2.add组件

<template>
  <div class="col-md-4">
    <form class="form-horizontal">
      <div class="form-group">
        <label>用户名</label>
        <input type="text" class="form-control" placeholder="用户名" v-model="username"/>
      </div>
      <div class="form-group">
        <label>评论内容</label>
        <textarea class="form-control" rows="6" placeholder="评论内容" v-model="content"></textarea>
      </div>
      <div class="form-group">
        <div class="col-sm-offset-2 col-sm-10">
          <button type="button" class="btn btn-default pull-right" @click="addC">提交</button>
        </div>
      </div>
    </form>
  </div>
</template>

<script>
export default {
  name: "Add",
  props:['addComment'],
  data(){
    return {
      //收集数据
      username:'',
      content:''
    };
  },
  methods:{
    addC(){
      //点击提交，要执行的回调函数

      //收集数据形成新的comment对象
      let {username,content} = this
      //验证数据的可靠性
      if(username.trim() && content.trim()){
        let id = Date.now()
        // 收集数据用作一个对象
        let comment = {
          username,
          content,
          id
        }

        //把新的comment对象添加到我们的comments数组当中
        //数据在哪定义，更新数据的方法就应该在哪去定义，而其它组件想要去修改数据，必须调用更新数据的方法去做
        this.addComment(comment)

        this.username = ''
        this.content = ''
      }else{
        alert('请输入评论信息')
      }

      
    }

  }
};</script>

<style scoped>
</style>

 

list组件

<template>
  <div class="col-md-8">
    <h3 class="reply">评论回复：</h3>
    <h2 style="display: none">暂无评论，点击左侧添加评论！！！</h2>
    <ul class="list-group">
      <!-- 循环遍历li,动态填充数据 -->
      <Item v-for="(comment, index) in comments" 
        :key="comment.id" 
        
        :comment="comment" 
        :deleteComment="deleteComment"
        :index="index">
      </Item>
    </ul>
  </div>
</template>

<script>
import Item from '@/components/Item'
export default {
  name: "List",
  components:{
    Item
  },
  //接收父亲的数据
  props:['comments','deleteComment'],//声明接收父组件传递过来的属性
};
</script>

<style scoped>
.reply {
  margin-top: 0px;
}
</style>

 

item组件

<template>
  <li class="list-group-item">
    <div class="handle">
      <a href="javascript:;"  @click="delteC">删除</a>
    </div>
    <p class="user">
      <span>{{comment.username}}</span>
      <span>说:</span>
    </p>
    <p class="centence">{{comment.content}}!</p>
  </li>
</template>

<script>
export default {
  name: "Item",
  props:['comment','index','deleteComment'],
  methods:{
    delteC(){
      //点击删除按钮的回调
      this.deleteComment(this.index)
    }
  }
};
</script>

<style scoped>
li {
  transition: 0.5s;
  overflow: hidden;
}

.handle {
  width: 40px;
  border: 1px solid #ccc;
  background: #fff;
  position: absolute;
  right: 10px;
  top: 1px;
  text-align: center;
}

.handle a {
  display: block;
  text-decoration: none;
}

.list-group-item .centence {
  padding: 0px 50px;
}

.user {
  font-size: 22px;
}
</style>

 

注；

1,父组件中有数组数据，通过props,需要传递一个函数addComment给子组件add,add组件中收集数据，
然后点击提交按钮时，需要将数据传递给父组件的函数，进行对数组的逻辑

2，父组件中有数组数据，通过props,需要传递一个函数deleteComment给子组件list, 然后list组件传递给
item组件，点击删除时，将数据传递给父组件