第十七课 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> 
相关推荐
Tttian62210 分钟前
npm init vue@latestnpm error code ETIMEDOUT
前端·vue.js·npm
患得患失94916 分钟前
【前端】【组件库开发】【原理】【无框架开发】现代网页弹窗开发指南:从基础到优化
前端
唐叔在学习20 分钟前
不用装插件!3轮对话,我用油猴脚本+AI复刻了掘金闪念笔记,真香!
javascript·浏览器
AliciaIr21 分钟前
深入React事件机制:解密“合成事件”与“事件委托”的底层奥秘
javascript·react.js
运维咖啡吧25 分钟前
给朋友们分享个好消息 7天时间23.5k
前端·程序员·ai编程
元气小嘉37 分钟前
前端技术小结
开发语言·前端·javascript·vue.js·人工智能
励志的大鹰哥1 小时前
V少JS基础班之第七弹
开发语言·javascript·ecmascript
神仙别闹1 小时前
基于ASP.NET+SQL Server实现(Web)企业进销存管理系统
前端·后端·asp.net
cccyi71 小时前
Vue3基础知识
javascript·vue.js
江城开朗的豌豆2 小时前
Vue计算属性:为什么我的代码突然变优雅了?
前端·javascript·vue.js