第十七课 component组件解析

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> 
相关推荐
烛阴17 分钟前
Python装饰器解除:如何让被装饰的函数重获自由?
前端·python
千鼎数字孪生-可视化31 分钟前
Web技术栈重塑HMI开发:HTML5+WebGL的轻量化实践路径
前端·html5·webgl
凌辰揽月31 分钟前
7月10号总结 (1)
前端·css·css3
天天扭码1 小时前
很全面的前端面试——CSS篇(上)
前端·css·面试
EndingCoder1 小时前
搜索算法在前端的实践
前端·算法·性能优化·状态模式·搜索算法
sunbyte1 小时前
50天50个小项目 (Vue3 + Tailwindcss V4) ✨ | DoubleVerticalSlider(双垂直滑块)
前端·javascript·css·vue.js·vue
Favor_Yang1 小时前
SQL Server通过存储过程实现HTML页面生成
前端·信息可视化·sqlserver·存储过程
中微子2 小时前
JavaScript事件循环机制:面试官最爱问的10个问题详解
前端
Eighteen Z2 小时前
CSS揭秘:10.平行四边形
前端·css·css3
拾光拾趣录2 小时前
虚拟DOM
前端·vue.js·dom