<!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元素属性被渲染
<!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, //父作用域调用子组件 子组件内部有模板 那么父组件传递的属性 会覆盖子组件标签上的属性 这就是继承
这个用法和$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>
’
原文：https://www.cnblogs.com/-constructor/p/12856354.html