1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Title</title> 6 <script src="../lib/js/vue.js"></script> 7 </head> 8 <body> 9 <div id="app"> 10 11 <!-- 父组件向子组件传递方法使用的是事件绑定机制，v-on ；当我们自定义了一个事件属性之后 12 子组件就能够通过某些方式，来调用传递进去的这个方法 --> 13 <com v-on:func="show"></com> 14 </div> 15 <template id="tem"> 16 <div> 17 <h1>这是子组件</h1> 18 <input type="button" value="子组件按钮-点击它触发父组件传递过来的func方法" @click="myClick"> 19 </div> 20 </template> 21 <script> 22 // 定义一个字面量类型的组件模板对象 23 const com = { 24 // 指定ID 表示要去加载这个指定ID的template元素中的内容当作组件的HTML结构 25 template:'#tem', 26 methods: { 27 myClick(){ 28 // console.log('ok') 29 // emit 英文原意是：触发，调用、发射 30 this.$emit('func') 31 } 32 } 33 }; 34 35 const vm = new Vue({ 36 el:'#app', 37 data:{}, 38 methods:{ 39 // 父组件中定义 show 方法 40 show(){ 41 console.log('调用了父组件身上的 show 方法') 42 } 43 }, 44 components:{ 45 com:com 46 } 47 }) 48 </script> 49 </body> 50 </html>