vue组件的创建

什么是组件

组件的出现就是为了拆分Vue实例的代码量，能够让我们以不同的组件来划分不同的功能模块，将来我们需要什么样的功能模块，就可以去调用对应的组件即可！

组件化和模块化的 区别

模块化：是从代码逻辑的角度进行划分的，方便代码分层开发，保证每个功能模块职能单一
组件化：是从UI界面的角度进行划分的，方便UI组件的重用

创建组件的方式1

  	// 1.1 使用Vue.extend 来 创建全局的Vue组件
    var com1 = Vue.extend({
    	// 通过template指定了组件要展示的html结构
        template: "<h3>这是使用 'Vue.extend'创建出来的组件</h3>"
    })
    // 1.2 使用Vue.component('组件的名称',创建出来的模板对象)
    Vue.component('myCom1', com1);
	
	// 也可缩写成以下形式
	 Vue.component('myCom1', Vue.extend({
        template: "<h3>这是使用 'Vue.extend'创建出来的组件</h3>"
    }))

	<div id='app'>
        <!-- 如果要使用组件，直接把组件的名称，以HTML标签的形式引入到页面中即可 -->
        <!-- 如果组建名称是驼峰命名：如myCom1，那么要使用以下这种格式 -->
        <my-com1></my-com1>
    </div>

创建组件的方式2

	// 直接传入一个字面量对象
	 Vue.compnent("mycom2", {
        template: "<h3>这是使用 'Vue.component'创建出来的组件</h3>"
    })

注意：无论是哪种方式创建的组件，属性中template属性指向的模板内容，必须有且只能有唯一的根元素

创建组件的方式3 （推荐）

  Vue.component("mycom3", {
        template: '#templ'
    })

	<div id='app'>
		<mycom3></mycom3>
	</div>
    <template id='templ'>
        <h3>这是定义的外部组件</h3>
    </template>

定义私有组件

	 var vm = new Vue({
        el: '#app',
        data: {},
        components: { // 定义实例内部私有组件
            login: {  // login:名称
                template: "<h1>这是私有的h1组件</h1>"
            }
        }
    })

组件中的data

  Vue.component("mycom", {
        template: "<h1>这是全局组件---{{msg}}</h1>",
        data: function () {
            return {
                msg: "这是组件中定义的数据"
            }
        }
    })

组件可以有自己的data数据，但是组件的data和实例的data不一样，实例中的data是一个对象，而组件中的data必须是一个方法，且该方法必须返回一个对象。

组件切换一：使用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>
        <regist v-else='flag'></regist>
    </div>

    Vue.component("login", {
        template: "<h3>登录组件</h3>",
    });
    Vue.component("regist", {
        template: "<h3>注册组件</h3>",
    });
    var vm = new Vue({
        el: '#app',
        data: {
            flag: false
        }
    })

缺陷：只能在两个组件之间进行切换。

组件切换一：使用Vue提供的component 标签

 	<div id='app'>
        <a href="#" @click.prevent='comName="login"'>登录</a>
        <a href="#" @click.prevent='comName="regist"'>注册</a>
        <!-- component 元素是一个占位符，is属性指定将要展示的组件名称 -->
        <component :is='comName'></component>
    </div>

    Vue.component("login", {
        template: "<h3>登录组件</h3>",
    });
    Vue.component("regist", {
        template: "<h3>注册组件</h3>",
    });
    var vm = new Vue({
        el: '#app',
        data: {
            comName: 'login'
        }
    })