Vue2.0 -- 组件局部注册

目录

组件定义

注册

使用组件

组件的命名

---

再做vue之前, 需要先引入vue.js文件

有很多官方或者非官方的cdn可以使用, 可自行前往 搜索下载

组件定义

        首先, 使用Vue.extend() 来定义一个组件 (注意这个步骤是在script标签中完成的)

    const testComponent = Vue.extend({
        
    })

       然后进行初始化操作, 初始化的时候, 在Vue.extend()中填入一个对象参数, 这个参数的格式和new Vue的操作大部分相似.

        第一个参数  : template, 也就是模板的意思, 它规定了组件以什么样的方式出现:

    const testComponent = Vue.extend({
        template : '
你好呀
'
    })

        第二个参数 : data, 如果组件中存在动态的数据, 那么就需要使用data来写入数据, 例如:

    const testComponent = Vue.extend({
        template : `
你好呀
        
我是{{name}}
`
    })

       这个时候你就会发现, 在运行的时候这样定义template是错误的

        在使用之前就需要对这个name进行赋值, 也就是使用类似于new Vue的时候的data字段:

        vue语法规定, 组件下, 只能有一个根元素, 但是这个根元素可以包含其他元素, 如果template下面有多个元素的时候, 就需要使用div将所有元素全部包裹, 满足只有一个根元素的条件.       

        注意下面代码中的template下级标签一定是一个div或者其他标签

    const testComponent = Vue.extend({
        template : 
        `

            
你好呀
            
我是{{name}}
         
`,
        data () {
            return {
                name : '张三'
            }
        }
    })

        注意上面代码中template 中把div圈起来的符号是 ``, 这个符号是位于英文键盘的左上角,Esc的下面一个按键, 同时除了这种直接在组件中声明template的格式, 还可以通过引用的形式来创建:

    const testComponent = Vue.extend({
        template : '#testTemplate',
        data () {
            return {
                name : '张三'
            }
        }
    })

        不过需要注意的是, 这里的data是以函数的形式出现的, 为什么?

        我们注意到, Vue的定义中, vue的组件是相互独立的存在, 两个不同的文件引用了同一个组件, 如果组件之前返回的数据是以data : {}的形式返回, 那么就意味着这个data必然有一个引用的对象, 也就是说, 这一个文件对这个组件的data引用里面的参数进行修改之后, 另外一个文件也会接收到这个修改, 就会影响组件的独立性, 所以这里使用方法的形式, 方数据直接通过方法返回给使用者, 那么修改的只是返回的值, 而不会影响其他文件.

        那么组件中是否能存在方法呢? 当然可以, 并且这个方法的使用和new Vue中的methods一样:

 

         在组件定义中加入methods对象, 对象的类型为方法, 每个方法之间使用逗号 ',' 隔开, 方法名和事件的名称对应上, 如上图代码.

注册

        注册就好比电话卡, 你拿到了一张电话卡, 如果你用一个没有停机的号码打这个电话卡, 那么就会显示此号码为空, 因为这和号码还没被运营商注册到网上

        你拿到的这个电话卡就相当于这里的组件, 把电话卡激活就相当于 对组件进行注册, 然后你得使用这张电话卡呀, 怎么使用? 当然是将其插入到手机中使用, 这里将电话卡插入手机就类似于将组件引用至文件中!!

        首先注册(局部注册), 你需要将其添加到vue的实例中, vue实例中有一个components字段, 这个字段用来存放一个或者多个组件, 每个组件之间使用英文逗号间隔, 如下:

        对于组件的存放格式, 为key : value的形式, key为使用的时候的名字, value为你组件的名字, 就比如你使用邮箱的时候, 你可以给你的邮箱[email protected] 起一个签名[email protected] , 叫做, 你的本质上还是这个1111@qq,com, 但是你使用给别人看的时候是[email protected].

        key为组件将要被使用之前我给它取的别名, value为组件定义的时候的名字.

        这个key的命名颇为有趣, 我们讨论在文章末尾讨论一下.

使用组件

        使用组件, 直接使用上文提到的key形成的标签来使用组件:

        在 id ='app'的div标签中, 直接使用组件别名来自定义一个标签: ""来使用.

组件的命名

        不少初学者在学习vue的时候都会遇到的一个头疼的问题, 因为不同的学生有不同的命名规范, 命名规范各不相同, 所以有些使用小驼峰命名的小伙伴可就惨了

        组件的命名有几个注意点:

1. 第一种写法为, 首字母小写
2. 第二种写法为首字母大写

        但是如果你的命名里面不止使用一个单词, 那么就需要注意:

1. 如果key的命名中包含 ' - ' 横杠, 那么就需要将整个key加上引号, 例如
   'my-key' : testcomponent
2. 如果使用驼峰的写法, 那么就需要 Vue的脚手架支持

        其次:

1. 组件需要回避html中已有的标签, 例如h标签, div标签
2. 可以使用name配置项指定组件在开发工具中呈现的名字(仅限开发工具), 也就是在组件定义的时候, 加上name 属性, 他是一个键值对的形式出现的字段.