vue.js组件的使用

一、组件简介

1.1什么是组件

组件的出现，就是为了拆分Vue实例的代码量，能够让开发人员以不同的组件，来划分不同的功能模块，将来需要什么样的功能，去调用对应的组件即可。需要区分的是，模块化是从代码逻辑的角度进行划分的，主要是为了方便代码分层开发，保证每个功能模块的职能单一；而组件是从UI界面的角度进行划分的，前端的组件化，方便UI组件的重用。

定义一个新组件

1.2组件的用法：

创建一个Vue的实例，把这个组件作为自定义的元素来使用，将它写在盒子里面

二、组件的使用

2.1创建一个组件

全局组件的使用：在被注册之后，可以用在任何一个新建的Vue实例中，也包括琪组件树中的所有组件。

全局组件的创建方法：

使用Vue.extend方法创建一个组件模板对象，在使用Vue》component方法进行注册。

var coml=Vue.extend({

template:'<h3>这是myComl</h3>'

})

在其他地方使用组件时，需使用Vue.component方法注册组件的同时为组件命名

var component('myComl',coml)

注意：在为组件命名时，如果使用了驼峰式命名，则在引用组件的时候，需要把大写的驼峰改为小写字母，同时，两个单词之间，使用“-”连接。例如上述的例子应该这样写：

组件之间可以进行合并：书写格式如下

组件创建实例完整代码：

<div id="app">
<my-coml></my-coml>
</div>

<script>
Vue.component('myComl',{
template:'<h3>这是myComl</h3>'

})
var vm = new Vue({el:'#app'});
</script>

Vue.js提供了<template>标签来定义组件结构的模板，模板代码直接写在HTML结构中，通过id值绑定到组件内的template属性上

使用<template>标签创建组件的方法：

<div id="app">
<mycom></mycom>
</div>
<template id="tmpl">
<h3>这是通过template标签创建出来的组件</h3>
</template>

组件的书写形式，需要注意的是，<template>必须在被Vue实例对象控制的#app外面使用，来定义组建的HTML模板结构。无论是哪种方式创建出来的组件，组件的template属性指向的模板必须有唯一的根元素。

以下是书写错误的示例：

正确的应该为：

使用<template>标签来创建一个组件，这样的开发方式不容易出错，也更有利于复杂界面的编写，改善开发体验，提高开发效率。

局部组件的使用：局部组件也称为私有组件，通过Vue实例的component属性来实现。

局部组件的创建示例：

<div id="app">
<vmcoml></vmcoml>
</div>
<template id="teml">
<div>
<h3>我是vm实例对象的私有组件tmpl</h3>
</div>
</template>
<script>
var vm = new Vue({
el:'#app',
data:{},
methods:{},
components:{
vmcoml:{
template:'#tmpl'
}
}
})
</script>

私有组件只能在创建该组件的Vue实例对象控制的区域使用。

2.2组件的数据和方法

在使用组件编写代码的过程中，还可以像Vue实例那样使用其他的选项，比如data，computed，methods，但是需要注意的是，在实例对象中的data作为一个对象，在组件data中必须是一个函数，而且必须将数据return出去。

组件中的data示例：

<div id="app">
<mycoml></mycoml>
</div>
<script>
Vue.component('mycoml',{
template:'<div>{{msg}}</div>',
data:function(){
return{
msg:'mycoml'
}
}
})
var vm new Vue({
el:'#app',
data:{},
methods:{}
});
</script>

在组件中，如果return出的数据引用了外部的一个对象，那么这个对象就是共享的，而且JavaScript对象是引用关系，任何一方修改数据的时候都会同步，修改数据时会同时修改相同对象的数据发生变化。显然，这样的结果是不符合需求的，数据共享的话失去了复用的作用，所以需要建立新的data对象来实现。

2.3组建的切换

页面可以通过链接实现组件的切换。可以通过v-if和v-else指令来切换组件。下面是一个vue.js登陆界面实例，

​
<div id="app">
        <a href=""@ click.prevent="comName='login'">登录</a>
        <a href=""@ click.prevent="comName='reg'">注册</a>
        <component :is="comName"></component>
    </div>

    <template id="login">
        <div style="width:300px;height:200px;border:1px solid #ccc;text-align:center">
        <h3>登录</h3>
        <p>用户名:<input type="text"name="username"></p>
        <p>密 &nbsp;&nbsp;&nbsp;码:<input type="password"name ="password"></p>
        <p><input type = "button"value ="登录"></p>
    </div>
    </template>

    <template id="reg">
        <div style="width:300px;height:200px;border:1px solid #ccc;text-align:center">
            <h3>注册</h3>
            <p>手机号:<input type ="text"name="username"></p>
            <p>密 &nbsp;&nbsp;&nbsp;码:<input type = "password" name = "password"></p>
            <p>用戸名:<input type= "text "name = "username"></p>
            <p><input type ="button"value="注册"></p>
        </div>
    </template>

    <script>
        Vue.component('login',{
            template:'#login'
        })
        Vue.component('reg',{
            template:'#reg'
        })
        var vm = new Vue({
            el:'#app',
            data:{
                comName:'login',
            }
        })
    </script>

​

实现组件的切换，需要修改<login v-if ="flag"></login> <reg v-else="flag'></reg>

改成如下样式

最后在data中的修改：

Vue对象实例中，不需要定义flag变量，但是需要定义“：is”属性绑定的变量值。

在上述案例代码中，想要实现多个组件切换，就可以修改使用的方法，在我们遇到多个页面切换的同时，我们可以更加便捷，高效的完成所需要达成的目标。

关于组件的内容，还有很多需要学习的地方，以上就是对vue.js组件的简单介绍以及一些代码的书写和使用方法，牛顿说过，我们都是在海边捡贝壳的孩子，知识之海广袤而深邃。