Vue 组件化及基本使用

目录

1、组件化是啥

2、注册组件的基本步骤

3、组件化的基本使用

4、组件之间的切换

---

1、组件化是啥

如果将一个页面中所有的处理逻辑全部放在一起，处理起来就会变得非常复杂，而且不利于后续的管理以及扩展。但如果将一个页面拆分成一个个小的功能块，每个功能块完成属于自己这部分独立的功能，那么之后整个页面的管理和维护就变得非常容易了。

Vue 组件化思想：组件化是 Vue.js 中的重要思想，它提供了一种抽象，让我们可以开发出一个个独立可复用的小组件来构造我们的应用。任何的应用都会被抽象成一棵组件树，如下图所示：

组件化思想的应用：有了组件化的思想，我们在之后的开发中就要充分的利用它，尽可能的将页面拆分成一个个小的、可复用的组件，这样让我们的代码更加方便组织和管理，并且扩展性也更强。

2、注册组件的基本步骤

组件的使用分成三个步骤：（1）创建组件构造器、（2）注册组件、（3）使用组件、

3、组件化的基本使用

3.1 全局组件和局部组件

全局组件通过 Vue.component({'组件名'，组件构造器}) 的方式注册，而局部组件是在当前声明的 vue 实例中通过 components：{'组件名'，组件构造器} 的方式注册。开发中常用的是局部组件。

（1）Vue.extend()：调用 Vue.extend() 创建的是一个组件构造器，通常在创建维件构造器时，会传入 template 代表我们自定义组件的模板，该模板就是在使用到组件的地方，要显示的HTML代码。事实上这种写法在 Vue2.x 的文档中就几乎已经看不到了，官网建议直接使用已经封装好的语法糖，直接在组件构造器的第二个参数写上 template 即可。

（2）Vue.component()：调用 Vue.component() 是将刚才的组件构造器注册为一个组件，并且给它起一个组件的标签名称。所以需要传递两个参数：1、注册组件的标签名，2、组件构造器

（3）组件必须挂载在某个 Vue 实例下，否则它不会生效，比如下面例子，注册的组件只能在<div id="app"></div>中使用。

<div id="app">
    <my-cpn></my-cpn>        <--3.使用组件-->
    <my-cpn></my-cpn>        <--可多次使用-->
    <cpn></cpn>              <--这是局部组件-->
</div>
<script src="../js/vue.js"></script>
<script>
    const myComponent = Vue.extend({    //1.调用extend()方法创建组件构造器
        template:`
            <div>
                <h2>组件标题</h2>
                <p>我是组件中的一个段落内容</p>
            </div>`
    });
    
    Vue.component('my-cpn',myComponent);    //2.注册全局组件，并且定义组件标签约名称
    let vm = new Vue({
        el:'app'
        components:{            //2.注册私有组件，仅可以在当前vue实例下使用
            cpn:myComponent 
        }
    })
</script>

3.2 语法糖代替 extend() 方法：上面这段代码如果使用语法糖的话，可以做如下改写：

<div id="app">
    <my-cpn></my-cpn>        <--3.使用组件-->
    <my-cpn></my-cpn>        <--可多次使用-->
    <cpn></cpn>              <--这是局部组件-->
</div>
<script src="../js/vue.js"></script>
<script>
    Vue.component('my-cpn',{    //语法糖，创建组件构造器和注册组件写在一起
        template:`
            <div>
                <h2>组件标题</h2>
                <p>我是组件中的一个段落内容</p>
            </div>`
    });
    let vm = new Vue({
        el:'app',
        components:{        //语法糖，创建组件构造器和注册组件写在一起
            template:`
                <div>
                    <h2>组件标题</h2>
                    <p>我是组件中的一个段落内容</p>
                </div>`
        }
    })
</script>

3.3 组件模板的抽离

上面这种写法虽然使用了语法糖，但是组件中写了很多的 HTML 代码，显得特别乱，因此可以将其抽离出来。

（1）将 HTML 代码抽离成 text/x-template 类型的 <script> 标签中，然后给 <script> 标签一个id，并将其引入到 template 中。 

<div id="app">
    <my-cpn></my-cpn>        <--使用组件-->
</div>
<script type="text/x-template" id="cpn">    //将HTML代码抽离成text/x-template类型的<script>标签中，并写一个id
    <div>
        <h2>组件标题</h2>
        <p>我是组件中的一个段落内容</p>
    </div>
</script>
<script src="../js/vue.js"></script>
<script>
    Vue.component('my-cpn',{    //将抽离的组件id写到这里
        template:'#cpn'
    });
    let vm = new Vue({
        el:'app'
    })
</script>

（2）使用 template 标签代替 text/x-template 类型的 <script> 标签

<div id="app">
    <my-cpn></my-cpn>        <--使用组件-->
</div>
<template id="cpn">    //使用 template 标签代替 text/x-template 类型的 <script> 标签
    <div>
        <h2>组件标题</h2>
        <p>我是组件中的一个段落内容</p>
    </div>
</template>
<script src="../js/vue.js"></script>
<script>
    Vue.component('my-cpn',{    //将抽离的组件id写到这里
        template:'#cpn'
    });
    let vm = new Vue({
        el:'app'
    })
</script>

4、组件之间的切换

（1）：v-if、v-else   这种方式适合两个组件间的切换

<div id="app">
    <a href="#" @click.prevent="flag = true">登陆</a>
    <a href="#" @click.prevent="flag = false">注册</a>
    <login v-if="flag"></login>
    <register v-else="flag"></register>
</div>
<script type="text/javascript">
    Vue.component('login',{
        template:'<h3>登陆组件</h3>'
    })
    Vue.component('register',{
        template:'<h3>注册组件</h3>'
    })
	
    var vm = new Vue({
        el:'#app',
        data:{
            flag:true
        },
        methods:{}
    });
</script>

（2）：动态绑定，这种方式适合多个组件之间的切换

<div id="app">
    <a href="#" @click.prevent="componentId = 'login'">登陆</a>
    <a href="#" @click.prevent="componentId = 'register'">注册</a>
	
    <!--Vue提供的component，来展示对应名称的组件-->
    <component :is="componentId"></component><!--组件的名称是字符串-->
</div>
<script type="text/javascript">
    //组件的名称是字符串
    Vue.component('login',{
        template:'<h3>登陆组件</h3>'
    })
    Vue.component('register',{
        template:'<h3>注册组件</h3>'
    })
	
    var vm = new Vue({
        el:'#app',
        data:{
            componentId:'login'	//当前component中的：is绑定的组件的名称
        },
        methods:{}
    });
</script>