<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>局部组件</title> </head> <body> <div id="app"> <a1></a1> </div> <template id="f1"> <div> {{name}} <hr> <c1></c1> <hr> <c2></c2> </div> </template> <template id="s1"> <div> {{name}} <button @click="sclick">点击</button> </div> </template> <template id="s2"> <div> {{name}} </div> </template> <script src="vue.js"></script> <script> let angle=new Vue()//创建一个空的Vue实例作为中间桥梁 new Vue({ el:'#app', components:{ a1:{ template:"#f1", data(){ return{ name:"我是a1" } }, components:{ c1:{ template:"#s1", data(){ return{ name:"我是子组件1" } }, methods:{ sclick(){ console.log('这是s1里的方法'); angle.$emit('test','hehe'); } } }, c2:{ template:"#s2", data(){ return{ name:"我是子组件2" } }, methods:{ custom(val){//调用到方法,可以通过这个方法传参 console.log('我是s2的一个方法'); this.name=val; } }, mounted(){ //生命周期,挂载完成之后 angle.$on('test',this.custom) } } } } } }) //步骤:(天使实例:事件总线) // 1、创建一个空的Vue实例 // 2、为Vue实例绑定一个方法 // 3、只要能获得这个空的Vue实例,不管在什么地方都能通过$emit来触发这个事件 //关键地方在于 调用要修改数据组件内部的一个方法 </script> </body> </html>
结果截图: