Vue2.0 -- 组件局部注册-阿里云开发者社区

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

<script src="../js/vue.js"></script>

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

组件定义

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

    const testComponent = Vue.extend({
        
    })

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

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

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

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

    const testComponent = Vue.extend({
        template : `<div>你好呀</div>
        <p>我是{{name}}</p>`
    })

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

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

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

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

    const testComponent = Vue.extend({
        template : 
        `<div>
            <div>你好呀</div>
            <p>我是{{name}}</p>
         </div>`,
        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一样:

 
<body>
    <div id="app">
        <testcomponent></testcomponent>
    </div>
    <template id="test">
        <div>
            <div>你好呀</div>
            <p>我是 {{name}}</p>
            <p>你是谁呀 <input type="button" value="我是你的好朋友" @click="doInput"></p>
        </div>
    </template>
</body>
<script>
 
    const testcomponent = Vue.extend({
        template : '#test',
        data () {
            return {
                name : '张三'
            }
        },methods  : {
            doInput() {
                alert('收到!!')
            }
        }
    });
    var vue = new Vue({
        el : '#app',
        data: {
 
        }, methods : {
            
        }
    });
 
</script>

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

注册

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

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

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

<body>
    <div id="app">
        
    </div>
    <template id="test">
        <div>
            <div>你好呀</div>
            <p>我是 {{name}}</p>
            <p>你是谁呀 <input type="button" value="我是你的好朋友" @click="doInput"></p>
        </div>
    </template>
</body>
<script>
 
    const testcomponent = Vue.extend({
        template : '#test',
        data () {
            return {
                name : '张三'
            }
        },methods  : {
            doInput() {
                alert('收到!!')
            }
        }
    });
    var vue = new Vue({
        el : '#app',
        data: {
 
        }, methods : {
            
        },components : {
            testcomponent // 相当于testcomponent : testcomponent 
            // 或者你可以写为:
            // testc : testcomponent
            // 那么使用的时候就是使用testc这个名字
        }
    });
 
</script>

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

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

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

使用组件

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

<body>
    <div id="app">
        <testcomponent></testcomponent>
    </div>
    <template id="test">
        <div>
            <div>你好呀</div>
            <p>我是 {{name}}</p>
            <p>你是谁呀 <input type="button" value="我是你的好朋友" @click="doInput"></p>
        </div>
    </template>
</body>
<script>
 
    const testcomponent = Vue.extend({
        template : '#test',
        data () {
            return {
                name : '张三'
            }
        },methods  : {
            doInput() {
                alert('收到!!')
            }
        }
    });
    var vue = new Vue({
        el : '#app',
        data: {
 
        }, methods : {
            
        },components : {
            testcomponent
        }
    });
 
</script>

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

组件的命名

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

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

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

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

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

其次:

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

Vue2.0 -- 组件局部注册

组件定义

注册

使用组件

组件的命名

热门文章

最新文章

相关课程

相关电子书