美文网首页Vue
非单文件组件

非单文件组件

作者: 卑微小李学前端 | 来源:发表于2021-08-06 10:25 被阅读0次

    Vue中使用组件的三大步骤

              一、定义组件(创建组件)

              二、注册组件

              三、使用组件(写组件标签)

            一、如何定义一个组件?

                使用Vue.extend(options)创建,其中options和new Vue(options) 时传入的那个options几乎一样,但也有点区别:

                区别如下:

                    1、el不要写,为什么?---因为最终所有的组件都要经过一个vm的管理,由vm中的el决定服务哪个容器

                    2、data必须写成函数,为什么?---避免组件被复用时,数据存在引用关系。

                备注:使用template可以配置组件结构。

            二、如何注册组件?

                1、局部注册:靠new Vue的时候传入componts选项

                2、全局注册:靠Vue。component('组件名',组件)

            三、编写组件标签

                <school></school>


    几个注意点:

              1、关于组件名:

                  一个单词组成:

                    第一种写法(首字母小写): school

                    第二种写法(首字母大写): School

                  多个单词组成:

                    第一种写法(kebab-case命名): my-school

                    第二种写法(CamelCase命名):MySchool(需要vue脚手架支持)

                  备注:

                    (1).组件名尽可能回避HTML中已有的元素名称,例如:h2、H2都不行

                    (2).可以使用name配置项指定组件在开发者工具中呈现的名字。 

              2、关于组件标签:

                      第一种写法:<school></school>

                      第二种写法:<school/>

                    备注:不用使用脚手架时,<school/>会导致后续组件不能渲染。

              3、一个简写方式:

                    const school = Vue.ectend(options)  可简写为  const school = options

    相关文章

      网友评论

        本文标题:非单文件组件

        本文链接:https://www.haomeiwen.com/subject/ahebvltx.html