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标签中, 直接使用组件别名来自定义一个标签: "<key></key>"来使用.