第十六课 Vue中的组件.md

Vue中的组件

Vue中可以自定义模板组件，组件的写法有很多种

组件写法

1）在components上拓展组件

    <div id="app">
        <test></test>
    </div>
    
    <script>
        new Vue({
            el:'#app',
            components: {
                test: {
                    template: '<h1>这是一个组件模板</h1>'
                }
            }
        })
    </script> 

2）在component上拓展组件

    <div id="app">
        <test></test>
    </div>
    
    <script>
        Vue.component('test', {
            template: '<h1>这是一个组件模板</h1>'
        })

        new Vue({
            el:'#app'
        })
    </script> 

3）将extend挂载到component上

extend可以拓展组件模板，然后可以将extend拓展的模板班挂载到component上

    let test = Vue.extend({
        template: '<h1>这是一个组件模板</h1>'
    })

    Vue.component('test', test);

    new Vue({
        el:'#app'
    })

4）将extend挂载到components上

    <div id="app">
        <test></test>
    </div>
    
    <script>
        let test = Vue.extend({
            template: '<h1>这是一个组件模板</h1>'
        })

        new Vue({
            el:'#app',
            components: {
                test
            }
        })
    </script> 

5）JS组件模板语法

    <div id="app">
        <test></test>
    </div>
    
    <script type="x-template" id="test">
        <h1>这是一个组件模板</h1>  
    </script>

    <script>
        new Vue({
            el:'#app',
            components: {
                test: {
                    template: '#test'
                }
            }
        })
    </script> 

6）template标签组件模板

    <div id="app">
        <test></test>
    </div>


    <template id="test">
        <h1>这是一个组件模板</h1>
    </template>

    <script>
        new Vue({
            el:'#app',
            components: {
                test: {
                    template: '#test'
                }
            }
        })
    </script>