关于vue.js:attrs与listeners

明天在官网看到组件传/取值除了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…（具体请看）