<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<script src="node_modules/vue/dist/vue.js"></script>
<style>
.tamplateAClass{
border: 3px solid red;
}
.childClass{
border: 1px solid blue;
}
</style>
</head>
<body>
<div id="box">
{{ msg }}
<hr>
<tamplate-a></tamplate-a>
</div>
</body>
<script>
//子组件向父组件通信:在子组件用$emit()传递之后必须在父组件调用子组件时给子组件添加属性及执行方法(先改变父组件内需要改变的数据),之后在父组件内就可以拿到子组件传递过来的数据
//注册局部组件
var componentsA={
data(){
return {
msg: "组件a中的msg信息",
num: 0
}
},
template: `<div class="tamplateAClass">{{ msg }} <button @click="alertNum()">弹出子组件count</button> </br> <child-b @thisCount="getCount"></child-b></div>`,
methods:{
getCount(count){
this.num=count;
},
alertNum(){
alert(this.num);
}
},
components: {
"childB":{
data(){
return {
msg: "子组件msg数据",
count: 0
}
},
template: `<div class="childClass"><button @click="add">添加</button> {{ count }}</div>`,
methods: {
add(){
this.count++;
//vue自带实例方法$emit("属性名", 需要传递的值)
this.$emit("thisCount",this.count);
}
}
}
}
}
new Vue({
el: "#box",
data: {
msg: "实例化Vue对象里的msg"
},
components: {
"tamplateA": componentsA
}
})
</script>
</html>