[Vue] コンポーネント 親から孫へ「v-bind="$attrs"」で値をまるごと渡す

子から孫へ、親から受け取った属性値(styleとclass属性を除いた)をまるごと渡すサンプルです。

親から子へ渡すサンプルはこちら
[Vue] コンポーネント 親から子へ「$attrs」で値をまるごと渡す

親から孫へ「$attrs」で値をまるごと渡す

親から子コンポーネントに$attrsで値が渡されています。
子コンポーネント内の孫コンポーネントに、v-bind="$attrs"とすることで、 親から渡された$attrs属性値をまるごと孫コンポーネントに渡すことができます。

  • $attrsは、styleとclass属性を除外されたデータです。

コード

template

<template>
<div id="app">
	<!-- Parent -->
	<input 
        type="text" 
        v-model="inputText"
        placeholder="入力してください。"
    >
    <!-- <p>入力した値 : {{ inputText }}</p> -->

    <!-- Component : Child -->
    <child-item 
        title="Child"
        :content="inputText"
    ></child-item>
</div>
</template>

script

<script>
var grandItem = Vue.component( 'grand-item', {
    template: `
        <div class="grand">
        	<h2>$attrs</h2>
            <pre><code>{{ $attrs }}</code></pre>
        </div>
    `
}); 
    
var childItem = Vue.component( 'child-item', {
    components: {
        grandItem
    },
    template: `
        <div id="child">
            <h2>$attrs</h2>
            <pre><code>{{ $attrs }}</code></pre>
            <hr>

            <!-- Component : GrandChild -->
            <grand-item
                v-bind="$attrs"
            ></grand-item>
        </div>
    `
});

    
export default {
    components: {
        childItem
    },
    data() {
        return {
            inputText: ''
        };
    }
};
</script>

メモ