親子孫コンポーネント間のpropsとメソッド伝達

原文:https://www.jianshu.com/p/ce8ca875c337親子の孫についての解説
v-bind=「$attrs」:親コンポーネントにバインドでき、サブコンポーネントで使用されていないすべてのpropsを孫コンポーネントに転送できます.

export default {
    'name':'test',
    props:[],
    data(){
        return {
            'name':'  ',
            'age':'30',
            'sex':' '
        }
    },
    components:{
        'childcom':{
            props:['name'],
            template:`<div>
                <div>        {{name}}</div>
                <grandcom v-bind="$attrs"></grandcom>
            </div>`,
            components: {
                'grandcom':{
                    template:`<div>      {{$attrs.age}}</div>`,
                }
            }
        }
    }
}

InheritAttrs="false":デフォルトではvueは親ドメインのpropsとは認められないプロパティをバインドし、通常のHTMLプロパティとしてサブコンポーネントのルート要素に適用しますinheritAttrs="false"はこのような状況を回避できます.
$listeners:v-on=「$listeners」は、親コンポーネントbindのメソッドを孫コンポーネントにそのまま伝えることができます.

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
        }
    }
}