<!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>
结果截图：
