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組件，點擊刪除時，將數據傳遞給父組件