Vue之创建组件 - ellaha

1，定义公有组件

<body>
    <div id="app">
　　　　　<!--步骤3：引入组件-->　
        <mycom3></mycom3>
    </div>
    <!--步骤2：在被控制的#app外面 使用template元素，定义组件的HTML模板结构-->
    <template id="tmp1">
        <div>
            <h1>你好3 在外部定义组件的结构</h1>
        </div>
    </template>
<script>
    //步骤1：组件创建的方式三
    Vue.component('mycom3', {
        template: '#tmp1'
    })

    var vm = new Vue({
        el: '#app',
        data: {},
        methods: {},
        filters: {},
        directives: {},

        created(){},
        mounted(){}
    })
</script>
</body>

2，定义私有组件

<body>
    <div id="app">
　　　　 <!--步骤3：引入组件-->
        <mycom3></mycom3>
    </div>
    <!--步骤2：在被控制的#app外面 使用template元素，定义组件的HTML模板结构-->
    <template id="tmp2">
        <div>
            <h1>你好3 在外部定义组件的结构</h1>
        </div>
    </template>
<script>
    var vm = new Vue({
        el: '#app',
        data: {},
        methods: {},
        filters: {},
        directives: {},
        //步骤1：定义实例内部私有组件，mycom3表示组件名称
        components: {
            mycom3: {
                template: '#tmp2'
            }
        },

        created(){},
        mounted(){}
    })
</script>
</body>