$ Attrs / inheritAttrs components can be achieved across the stage transfer
Question 1 // Why this. $ Attrs can get the value of the primary transfer from the
// $ attrs Description
// $ attrs can easily achieve transparent transmission properties, it is relatively simple to use, to avoid the pain of write props.
// When a component does not declare any prop time, attrs which contains all data of the upper assembly passed (except style and class)
// When a component declares prop time, attrs remove the prop which contains the data inside the rest of the data.
// inheritAttrs
// 1. When disposed in a subassembly inheritAttrs: false time, attrs which properties are not as html rendering attribute data on the node dom.
// 2. When not set in inheritAttrs subassembly, attrs properties which renders node on html
// 3. When set to inheritAttrs: false when, in the statement cycle components can be created by this $ attrs get inside the upper component data.
// When disposed in a subassembly inheritAttrs: false time, attrs there is no style attributes and class
// $ attrs / $ listeners can not just cross-stage transfer between brothers
// components go inside the largest component introduced go1
// go1 components inside go2 components
// go2 there go3 components
go.vue
<template>
<div>
I go
<go1
:foo="foo"
:boo="boo"
:coo="coo"
:doo="doo"
></go1>
</div>
</template>
<script>
import go1 from "../go1/go1"
export default {
data(){
return{
foo: "Javascript",
boo: "Html",
coo: "CSS",
doo: "Vue"
}
},
components:{
go1
}
}
</script>
go1.vue
<template>
<div>
<h2>-----------------</h2>
<br>
我是go1111
<!-- <p>foo: {{ foo }}</p> -->
<!-- <p>go1得到主组件中的数据$attrs: {{ $attrs }}</p> -->
<go2 v-bind="$attrs"></go2>
<br>
<h2>-----------------</h2>
</div>
</template>
<script>
import go2 from "../go2/go2"
export default {
components:{
go2
},
inheritAttrs: false, // .当设置为inheritAttrs: false的时候,在组件的声明周期中可以通过 this.$attrs 获取里面的上层组件数据。
props: { foo: String // 当声明了prop时候,attrs里面包含除去prop里面的数据剩下的数据。 所以下面没有 Javascript
},
created() {
console.log("我在1出输出",this.$attrs); // {boo: "Html", coo: "CSS", doo: "Vue"}
}
}
</script>
go2.vue
<template>
<div>
<h2>-----------------</h2>
<br>
go222
<p>boo: {{ boo }}</p>
<p>childCom2: {{ $attrs }}</p>
<go3 v-bind="$attrs"></go3>
<br>
<h2>-----------------</h2>
</div>
</template>
<script>
import go3 from "../go3/go3"
export default {
components:{
go3
},
inheritAttrs: false,
props: {
boo: String //当声明了prop时候,attrs里面包含除去prop里面的数据剩下的数据。 所以下面没有 html
},
created() {
console.log("我是组件2",this.$attrs); // 我是组件2 {coo: "CSS", doo: "Vue"}
}
}
</script>
go3.vue
<template>
<div>
<h2>-------</h2>
<br>
go333
<p>childCom3: {{ $attrs }}</p>
<h2>-------</h2>
<br>
</div>
</template>
<script>
export default {
props: {
coo: String, //当声明了prop时候,attrs里面包含除去prop里面的数据剩下的数据。 所以下面没有 coo
},
created() {
console.log("我是组件3",this.$attrs); // 我是组件2 { doo: "Vue"}
}
}
</script>