Vue學習（六）——父子元件之間的傳值
阿新 • • 發佈：2018-11-26
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>子元件和父元件通訊(釋出訂閱模式)</title> <script src="./vue.js"></script> </head> <body> <!-- 每個元件實際就是一個例項 --> <!--子向父傳值 子元件通過$emit釋出事件，父元件訂閱了該事件就會觸發 --> <!--父向子傳值，通過props傳值 --> <div id="root"> <div> <input v-model="inputValue"/> <input type="button" value="提交" @click="handleClick"> </div> <ul> <todo-item v-for="(item,index) in list" :key="index" :content="item" :index="index" @delete1="handleDelete"></todo-item> </ul> </div> <script> Vue.component('todo-item',{ props:['content','index'], template:'<li @click="handleClick">{{content}}</li>', methods:{ handleClick:function(){ this.$emit('delete1',this.index); //觸發事件 } } }) new Vue({ el:"#root", data:{ inputValue:'', list:[] }, methods:{ handleClick:function(){ this.list.push(this.inputValue); this.inputValue=""; }, handleDelete:function(index){ this.list.splice(index,1); } } }) </script> </body> </html>
注：學習筆記內容來自：https://www.imooc.com/learn/980
官網：cn.vuejs.org