Vue.js コンポーネント作成

コンポーネントを作成する

グローバル登録、ローカル登録、シングルファイルコンポーネントの作成方法がある

    <div id="app">
        <paragraph></paragraph>
    </div>
    <script>
        Vue.component('paragraph',{
            data:function(){
                return {
                    counter: 0
                }
            },
            template:'<div><button @click="counter++">{{counter}}</button></div>'
        })
    </script>

<paragraph message="hello"></paragraph>の
messageプロパティを受け取り表示させる

    <div id="app">
        <paragraph message="hello"></paragraph>
        <paragraph message="world"></paragraph>
    </div>
    <script>
        Vue.component('paragraph',{
            props:['message'],
            template:'<div>{{ message }}</div>'
        })

プロパティの値が長い場合、<slot></slot>で同様の動きが可能

    <div id="app">
        <paragraph>hellohellohello</paragraph>
    </div>
    <script>
        Vue.component('paragraph',{
            template:'<div><slot></slot></div>'
        })