自定义事件触发机制
$emit、$dispatch、$broadcast用法：
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="UTF-8"> 5 <meta http-equiv="x-ua-compatible" content="IE=edge,chrome=1"> 6 <meta name="viewport" content="width=device-width,initial-scale=1"> 7 <title>自定义事件触发机制</title> 8 </head> 9 <body> 10 <!--模板--> 11 <div id="app"> 12 <input type="text" v-model="content"> 13 <button @click="addTodo">添加</button> 14 <button @click="broadcast">广播</button> 15 <child-todo name="one"></child-todo> 16 <child-todo name="two"></child-todo> 17 <ul> 18 <li v-for="value in todo"> 19 {{ value }} 20 </li> 21 </ul> 22 </div> 23 <script src="../js/vue.js"></script> 24 <script> 25 // 子组件 26 Vue.component('child-todo',{ 27 props: ['name'], 28 data: function () { 29 return { 30 content: '' 31 } 32 }, 33 template:'<div>Child {{name}}<input type="text" v-model="content" />' + 34 '<button @click="add">添加</button></div>', 35 methods: { 36 add: function () { 37 //向上冒泡，触发父组件中定义好的add事件 38 this.$dispatch('add','Child '+this.name+': '+this.content); 39 this.content = ''; 40 } 41 }, 42 events:{ 43 'to-child':function (msg) { 44 //向上冒泡，触发父组件中定义好的add事件 45 this.$dispatch('add','Child '+this.name+': '+msg); 46 } 47 } 48 }); 49 // 根实例 50 var vm = new Vue({ 51 el:'#app', 52 data: { 53 todo:[], 54 content:'' 55 }, 56 methods: { 57 addTodo: function () { 58 // 触发自己实例中的事件 59 this.$emit('add','parent: '+this.content); 60 this.content = ''; 61 }, 62 broadcast: function () { 63 // 将事件广播，使两个子组件实例都触发to-child事件 64 this.$broadcast('to-child',this.content); 65 this.content = ''; 66 } 67 }, 68 events: { 69 'add': function (msg) { 70 this.todo.push(msg); 71 } 72 } 73 }); 74 75 </script> 76 77 </body> 78 </html>
