【Vue.js】プロパティ属性の使い方

今日はコンポーネントのプロパティについてです。

コンポーネントのdataはコンポーネントのオブジェクトからテンプレートに値を渡すものでした。

コンポーネントのプロパティを使うと、自分で作成したコンポーネントのタグに値を指定することができます。

コンポーネントのプロパティを使うには、コンポーネントのオブジェクトを作成する際にprops属性を指定します。

<div id="hoge" class="m-5">
    <fuga name="taro" msg="Let's use a property!!"/>
</div>

{% raw %}
<script type="text/x-template" id="fuga-template">
    <div>
        <p class="alert alert-primary h5">
            This is my-components.
        </p>
        <p>
            {{ name }}
        </p>
        <p>
            {{ msg }}
        </p>
    </div>
</script>
{% endraw %}

<script>

Vue.component('fuga', {
    template: '#fuga-template',
    props:[ 'name', 'msg' ]
});

new Vue({
    el:'#hoge',
});

</script>

以上のコードのように、fugaと言う自作コンポーネントの利用時にnameとmsgの中身を指定しています。

指定した値はそのままテンプレートに渡され表示されます。

vueオブジェクトを作成するときには、props属性を用いて変数名を指定するのを忘れないようにするのがポイントです。

ABOUTこの記事をかいた人

個人アプリ開発者。Python、Swift、Unityのことを発信します。月間2.5万PVブログ運営。 Twitter:@yamagablog