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元件，點選刪除時，將資料傳遞給父元件