第十七课 component组件解析

MarcoPage2024-11-03 13:56

component组件解析

component组件的写法在众多组件写法中算是比较简单的，component组件结构组成如下：

1）组件名

2）组件模板

3）利用Vue对象进行生成

基础示例：

复制代码

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

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

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

component组件

我们可以通过在实例外部以component的方式拓展单个组件，当前方式需要在构建全局实例之前进行组件创建，不存在组件提升。（类似于变量提升）

1）创建组件

复制代码

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

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

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

2）分离模板创建组件

复制代码

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

    <script>
        let tem = {
            template: '<h1>这是一个组件模板</h1>'
        }

        Vue.component('test', tem);

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

3）通过components拓展组件

components和methods类似，表示（组件）集合，我们也可以直接通过components进行组件拓展

复制代码

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

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

驼峰式命名

驼峰式命名在使用的时候，需要将调用的组件名转换成横杠式

复制代码

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

    <script>
        Vue.component('testMe', {
            template: '<h1>这是一个组件模板</h1>'
        })

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

组件中的DOM包裹规则

1）单DOM组件

复制代码

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

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

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

2）多DOM组件

如果组件涉及的DOM较多，必须要将所有DOM包裹在一个主DOM中，否则将报错

复制代码

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

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

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

3）配合ES6模板语法使用

复制代码

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

    <script>
        Vue.component('test', {
            template: `<div>
                            <h1>这是一个组件模板</h1>
                            <h1>这是第二个组件模板</h1>
                      </div>`
        })

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