【Vue 组件以及插槽】

一、vue组件

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

组件化和模块化的不同：
模块化：是从代码逻辑的角度进行划分的；方便代码分层开发，保证每个功能模块的职能单一（高内聚低耦合）
组件化：是从UI界面的角度进行划分的；前端的组件化，方便UI组件的重用

1、Vue.extend Vue.component

定义全局组件（组件的名字，声明）

<div id='app'>
        <!-- 1 -->
        <!-- 组件的名字当作标签 不使用内置或保留的HTML元素作为组件id -->
        <login></login>
</div>

 var login = Vue.extend({
       template:'<h1>登录1</h1>'
     });
   // 定义全局组件 (组件的名字，声明)
  Vue.component('login',login)

2、

<div id='app'>
        <!-- 1 -->
        <!-- 组件的名字当作标签 不使用内置或保留的HTML元素作为组件id -->
        <login></login>
</div>

Vue.component('login',{
            template:'<h1>登录2</h1>'
        });
        

3、

<script type="x-template" id="temp">
        <h1>登录3</h1>
</script>

Vue.component('login', {
            template: '#temp'
        })

4

 <template id="temp">
        <!-- 只能有一个根元素 -->
        <div v-if="true">
            <h2>登录4</h2>
            <h1>登录</h1>
        </div>
        <div v-else>
            <!-- <h3>登录</h3> -->
        </div>
 </template>

 Vue.component('login', {
            template: '#temp'
        })

二、私有组件定义

  <div id='app1'>
        <!-- 组件的名字当作标签
        不使用内置或保留的HTML元素作为组件的id
        -->
        <my-login></my-login>
    </div>
    <template id="temp">
        <div>
            <h2>登录</h2>
        </div>
    </template>

/* 私有定义 */
            components: {
                'my-login': {
                    template: '#temp'
                }
            }

三、展示数据和响应事件

  <template id="login">
        <div>
            <button @click="add(4)">加4</button>
            登录{{msg}}{{num}}
        </div>
    </template>

 Vue.component('login', {
            template: '#login',
            //为什么组件中的data属性必须定义未一个方法并返回一个对象
            // 数据隔离
            data() {
                return {
                    msg: '今天学组件',
                    num: 6,
                }
            },
            methods: {
                add(n) {
                    this.num += n
                }
            },
            beforeCreate () {
              console.log(1);  
            },
            created () {
               console.log(2); 
            },
            beforeDestroy () {
               console.log('beforeDestroy'); 
            }, 
            destroyed () {
                console.log('destroyed');
            }
        })

 <!-- 使用component标签，来引用组件，并通过：is属性来指定要加载的组件-->
        <!-- mode 只能用于组件 -->
        <transition mode="in-out">
            <component :is="flag?'login':'mine'"></component>
        </transition>