<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>vueApp</title>
<script src="../00基础语法/lib/vue-2.4.0.js"></script>
</head>
<!--
组件之间的通信:
这里有下列组件的层次:
top
center
bottom
要通过top对bottom传递消息
1.只使用props需要使用2层props，即先通过v-bind:(center的内置变量)="msg" ，然后再次v-bind:(bottom的内置变量)=center的内置变量
传递下去才可以完成传递。
2.使用$attrs，在需要通信的层直接绑定，可以获得父组件的所有属性（非props）,属性穿透
3.使用$listeners 监听事件，简单点讲它是一个对象，里面包含了作用在这个组件上所有的监听器
（监听事件），可以通过 v-on="$listeners" 将事件监听指向这个组件内的子元素（包括内部的子组件）
4.$attrs-> props调用， $listeners -> 使用$emit调用 @test1(绑定的别名，在DOM容器中) $emit("test1")
多组件共用一个DOM容器,也就是new Vue空间
-->
<body>
<div id="app">
<top></top>
</div>
<template id="top">
<section>
<!-- 因为继承机制，属性可以传递下去，可以通过这两个属性调用 -->
<centers
:name="name"
:age="18"
:gender="666"
@test1=isClick
></centers>
<!-- <a @click="isClick">点击</a> -->
</section>
</template>
<template id="centers">
<section>
<div class="mt-10">
<bottom v-bind="$attrs" v-on="$listeners" />
</div>
<!-- {{ gender }} --> 通过props接受后可以直接使用
<!-- {{ $attrs['name'] }}asdasd -->
<a @click="isClick">点击center</a>
</section>
</template>
<template id="bottom">
<section>
<div>
{{ $attrs['gender'] }} 在$attrs里面只会有props没有注册的属性
<br>
<!-- {{ gender }} -->
<a @click="isClick">点击</a>
</div>
</section>
</template>
<script>
Vue.component("centers", {
data() {
return {}
},
template: "#centers",
methods: {
isClick() {
this.$emit("test1")
}
}
})
Vue.component("bottom", {
data() {
return {
}
},
template: "#bottom",
// props: ["gender"]
methods: {
isClick() {
this.$emit("test1")
}
}
})
Vue.component("top", {
data() {
return {
name: 123,
age: 123,
gender: 11,
}
},
template: "#top",
methods: {
isClick() {
console.log(this.name)
},
asd() {
console.log("asd")
}
}
})
var vue = new Vue({
el: "#app",
components: {
// top: "#top",
// bottom: "#bottom",
// centers: "#centers"
},
data: {
},
methods: {
}
});
</script>
</body>
</html>
浙公网安备 33010602011771号