[Vue] コンポーネント 親から子へ「$attrs」で値をまるごと渡しつつ、一部の値を「props」で渡す

親から子へ「$attrs」で値をまるごと渡しつつ、一部の値を「props」で渡すサンプルです。

親から子へ「$attrs」で属性値(データ)をまるごと渡しつつ、一部の値を「props」で渡す

右側の属性値なしの場合は、$attrsに値が入っていなく、propsで設定した値のみ表示されています。

コード

template

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

    <!-- Component : Child -->
    <child-item 
        title="Child"
        :content="inputText"
        :number="5"
    ></child-item>
    <!-- Component : Child 属性なし -->
    <child-item></child-item>
</div>
</template>

script

<script>
var childItem = Vue.component( 'child-item', {
    props: {
        number: {
            type: Number,
            default: 0
        }
    },
    template: `
        <div class="child">
            <h2>$attrs</h2>
            <pre><code>{{ $attrs }}</code></pre>
            <hr>
            <p>number : {{ number }}</p>
        </div>
    `
});

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

親から孫へ「$attrs」で属性値(データ)をまるごと渡しつつ、一部の値を「props」で渡す

右側の属性値なしの場合は、$attrsに値が入っていなく、propsで設定した値のみ表示されています。

コード

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>
    <!-- Component : Child 属性なし -->
    <child-item></child-item>
</div>
</template>

script

<script>
var grandItem = Vue.component( 'grand-item', {
    props: {
        number: {
            type: Number,
            default: 20
        }
    },
    template: `
        <div class="grand">
            <h2>$attrs</h2>
            <pre><code>{{ $attrs }}</code></pre>
            <hr>
            <p>number : {{ number }}</p>
        </div>
    `
}); 
    
var childItem = Vue.component( 'child-item', {
    components: {
        grandItem
    },
    props: {
        number: {
            type: Number,
            default: 0
        }
    },
    template: `
        <div class="child">
        	<h2>$attrs</h2>
            <pre><code>{{ $attrs }}</code></pre>
            <hr>
            <p>number : {{ number }}</p>

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

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

メモ

デフォルト値や必須などの設定をしたい場合は、propsを利用する必要がありそうです。