<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="https://cdn.bootcss.com/vue/2.4.2/vue.js"></script>
</head>
<body>
<div class="home">
<div>{{title}}</div>
<mytest :title="title" :massgae="massgae" :xixi='xixi'></mytest>
</div>
<script>
var vm = new Vue({
el: '.home',
data: {
title:'title1111',
massgae:'message111'
},
computed: {
xixi: function () {
return 'xixi'
}
},
components:{
'mytest':{
template:`<div>這是個h1標題{{title}}</div>`,
props:['title'],
data(){
return{
mag:'111'
}
},
created:function(){
console.log('>>>>>>>>>>>', this.$attrs)//注意這里
}
}
}
})
</script>
</body>
</html>
打印出來
>>>>>>>>>>> {massgae: "message111", xixi: "xixi"}
繼承父組件沒有使用的屬性，就算當前組件沒有通過props傳遞進來，當前組件依然可以通過$atrrs取到message的值。
但是必須要屬性傳遞
組件內未被注冊的屬性將作為普通html元素屬性被渲染
在Vue2.4.0,可以在組件定義中添加inheritAttrs：false，組件將不會把未被注冊的props呈現為普通的HTML屬性。但是在組件里我們可以通過其$attrs可以獲取到沒有使用的注冊屬性，如果需要，我們在這也可以往下繼續傳遞。
重點 穿透屬性傳遞
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="https://cdn.bootcss.com/vue/2.4.2/vue.js"></script>
</head>
<body>
<div class="home">
<div>{{title}}</div>
<Component-b :massgae='massgae'></Component-b>
<mytest :title='title' :massgae='massgae'></mytest>
</div>
<script>
var vm = new Vue({
el: '.home',
data: {
title:'title1111',
massgae:'message111'
},
computed: {
xixi: function () {
return 'xixi'
}
},
components: {
'ComponentB': {
template: `<div>B<component-c v-bind="$attrs"></component-c></div>`,
// inheritAttrs: false,
components: {
'ComponentC': {
props: ['massgae'],
template: '<div>C{{massgae}}</div>',
created:function(){
console.log('>>>>>>>>>>>', this.massgae)//注意這里
}
}
}
}
}
// components:{
// 'mytest':{
// template:`<div>這是個h1標題{{title}}</div>`,
// props:['title'],
// inheritAttrs: false,
// data(){
// return{
// mag:'111'
// }
// },
// created:function(){
// console.log('>>>>>>>>>>>', this.$attrs)//注意這里
// }
// }
// }
})
</script>
</body>
</html>
只需要中間組件 調用孫子組件的時候傳遞一個 v-bind=‘$attrs’ 孫子組件就可以直接 props[] 接受 也可以 this.$attrs[屬性名字] //1.父元素必須傳遞元素 //中間元素props過的屬性 就不會傳遞下去
關於繼承屬性開關 還是很有用的
// inheritAttrs: false, //父作用域調用子組件 子組件內部有模板 那么父組件傳遞的屬性 會覆蓋子組件標簽上的屬性 這就是繼承
$listeners
這個用法和$attrs正好相反 是像外觸發事件的中間層綁定一個 v-on='listeners'就可以了
<template>
<div>
<childcom :name="name" :age="age" :sex="sex" @testChangeName="changeName"></childcom>
</div>
</template>
<script>
export default {
'name':'test',
props:[],
data(){
return {
'name':'張三',
'age':'30',
'sex':'男'
}
},
components:{
'childcom':{
props:['name'],
template:`<div>
<div>我是子組件 {{name}}</div>
<grandcom v-bind="$attrs" v-on="$listeners"></grandcom>
</div>`,
components: {
'grandcom':{
template:`<div>我是孫子組件-------<button @click="grandChangeName">改變名字</button></div>`,
methods:{
grandChangeName(){
this.$emit('testChangeName','kkkkkk')
}
}
}
}
}
},
methods:{
changeName(val){
this.name = val
}
}
}
</script>
’