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

親から子へ $attrs で値をまるごと渡すサンプルです。
props では、受け取りたいデータ(属性値)を子コンポーネント側で props に記述する必要がありました。
今回の $attrs では、 props を設定することなく、設定された属性値(styleとclass属性を除いた)を全て受け取ります。

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

$attrsに、コンポーネント「child-item」の属性で設定した値が入っています。

コード

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 childItem = Vue.component( 'child-item', {
    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>

メモ

属性の継承の無効化

inheritAttrs: falseを設定すると、属性の継承の無効化ができるようです。