vue组件的创建

什么是组件

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

组件化和模块化的 区别

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

创建组件的方式1

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

	<div id='app'>
        
        
        <my-com1>my-com1>
    div>

创建组件的方式2

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

注意：无论是哪种方式创建的组件，属性中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组件
"
            }
        }
    })

组件中的data

  Vue.component("mycom", {
        template: "
这是全局组件---{{msg}}
",
        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: "
登录组件
",
    });
    Vue.component("regist", {
        template: "
注册组件
",
    });
    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='comName'>component>
    div>

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