Vue把父元件的方法傳遞給子元件呼叫(評論列表例子)
阿新 • • 發佈：2018-11-03
Vue把父元件的方法傳遞給子元件呼叫(評論列表例子)
效果展示:
相關Html:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <script src="../js/vue-2.4.0.js"></script> <link rel="stylesheet" href="../bootstrap-3.3.7-dist/css/bootstrap.min.css"> <style> </style> </head> <body> <div id="app"> <cmt-box @func="loadComments"></cmt-box> <ul class="list-group" v-for="item in list" :key="item.id"> <li class="list-group-item"> <span class="badge">評論人:{{item.user}}</span> {{item.content}} </li> </ul> </div> <template id="temp1"> <div> <div class="form-group"> <span>評論人:</span> <input type="text" class="form-control" v-model="user"> </div> <div class="form-group"> <span>評論內容:</span> <input type="text" class="form-control" v-model="content"> </div> <div class="form-group"> <input type="button" value="發表評論" class="btn btn-primary" @click="postComment" > </div> </div> </template> <script> var commentBox = { data: function () { return { user: '', content: '' } }, template: '#temp1', methods: { postComment: function () { // 分析發表評論的業務邏輯 // 1.評論資料存到哪裡去 存到本地 // 2.先組指出一個最新的評論資料物件 //3.想辦法把第二步中得到的評論物件 儲存到localStorage // 3.1本地 只支援存放字串資料 要先掉JSON.stringify // 3.2在儲存最新的評論資料之前,先從localStorage獲取之前的評論資料 轉換為一個數組物件 // 然後把最新的評論 push到這個陣列 // 3.3如果獲取的localStorage中評論字串 為空不存在 則可以返回空'[]' 讓JSON.parse()去轉換 // 3.4 把最新的評論列表陣列 再次呼叫JSON.stringify轉為陣列字串 最後localStorage.setitem var comment = {id: Date.now(), user: this.user, content: this.content}; console.log(this.user); //這個是從localStorage中 獲取所有的評論 var list = JSON.parse(localStorage.getItem('cmts') || '[]'); list.unshift(comment); //重新儲存最新的評論資料 localStorage.setItem('cmts', JSON.stringify(list)); this.user = this.content = ''; this.$emit('func'); } } } var vm = new Vue({ el: '#app', data: { list: [ {id: Date.now(), user: '李白', content: '天成我材必有用'}, {id: Date.now(), user: '江小白', content: '勸君更盡一杯酒'}, {id: Date.now(), user: '小馬', content: '我姓馬,風吹草低見牛羊'} ] }, created:function () { this.loadComments(); }, methods: { loadComments: function () {//從localStorage中載入評論 var list = JSON.parse(localStorage.getItem('cmts') || '[]'); this.list = list; } }, components: { 'cmt-box': commentBox } }); </script> </body> </html>