明天在官网看到组件传 / 取值除了 provide/inject,emit…. 还能够应用 $attrs 和 $listeners
于是看官网文档：
$attrs
蕴含了父作用域中不作为 prop 被辨认 (且获取) 的个性绑定 (`class` 和 `style` 除外)。当一个组件没有申明任何 prop 时，这里会蕴含所有父作用域的绑定 (`class` 和 `style` 除外)，并且能够通过 `v-bind="$attrs"` 传入外部组件——在创立高级别的组件时十分有用. 简略来说：接管除了 props 申明外的所有绑定属性（class、style 除外
$listeners
蕴含了父作用域中的 (不含 `.native` 润饰器的) `v-on` 事件监听器。它能够通过 `v-on="$listeners"` 传入外部组件——在创立更高层次的组件时十分有用 简略来说
接管除了带有.native 事件修饰符的所有事件监听器 如下示例：
parent.Vue
<template>
<div style="height:5000px;background:#fff;">
<h5> 子父组件传值（子组件扭转 prop 值）</h5>
<vChild :msgVal='msg' :age='age' :sex='sex' @changeMsg='changeMsg'></vChild>
</div>
</template>
<script>
import vChild from './vChild.vue'
export default {
components:{vChild},
data(){
return{
msg:'这是父组件哦',
age:12,
sex:'女'
}
},
methods:{changeMsg(param){alert('555')
}
}
}
</script>Child.vue
<template>
<div style="height:5000px;background:#fff;text-align:left;">
<h5> 子组件 </h5>
props:{{mag1}}
<el-button @click="changeProps"> Start</el-button>
<br>
<span>
<!-- 孙组件绑定 attrs -->
<Grandson v-bind="$attrs" height='88'></Grandson>
</span>
<!-- msg2:{{msg2}} -->
</br>
<!-- <h5> 初始值：{{num}}</h5>
<el-button @click="changeCom">Start</el-button>
</br>
<h5>Computed 响应 data 值：{{Comnum}}</h5>
</br>
<h5>Computed 不会响应不存在 data 中的值：{{NowTime}}(获取以后工夫戳)</h5> -->
</div>
</template>
<script>
import Grandson from './grandSon'
export default {props:['msgVal'],
components:{Grandson},
data(){
return{
mag1:'',
num:55,
}
},
computed:{Comnum(){
let total = this.num*10
return total;
},
NowTime(){return Date.now();
},
msg2(){return this.msgVal},
},
watch:{Now(newVal){console.log(newVal)
}
},
methods:{changeProps(){// console.log('111111')
this.mag1 = '扭转了 props',
this.$emit('changeMsg','333')
},
changeCom(){this.num+=1},
},
mounted(){
this.mag1 = this.msgVal;
console.log(this.$attrs) // 承受到父组件除 props 属性 {'age':12,'sex':'女'}
console.log(this.$listeners.changeMsg()) // 也能够相当于调用该办法 {changeMsg:f}
},
}grandSon.vue
<template>
<div>
<h1> 孙组件 </h1>
</div>
</template>
<script>
export default {data(){return{}
},
mounted(){console.log(this.$attrs) //{height:'88',age:12,sex:'女'} 接管到祖父组件的属性（除 props）以及本属性
}
}
</script>https://www.cnblogs.com/chanw…（具体请看）