vue基础篇- 组件详解（第七章）（二）

四、使用slot 分发内容
1、什么是sloat
当需要让组件组合使用，混合父组件的内容与子组件的模板时，就会用到slot，这个过程叫做内容分发。

• 组件不知道它的挂载点会有什么内容。挂载点的内容是由
• 的父组件决定的。 组件很可能有它自己的模板。

props传递数据、events触发事件和slot内容分发就构成了Vue组件的3个API来源，再复杂的组件也是由这3部分构成。
2、作用域

  <child-component>
        {{message}}
    </child-component>

这里的message就是一个slot，但是它绑定的是父组件的数据，而不是组件<child-component>的数据。
父组件模板的内容是在父组件作用域内编译，子组件模板的内容是在子组件作用域内编译。

<div id="app">
    <child-component v-modle="showChild"></child-component>
</div>

Vue.component('child-component', {
    template: `<div>子组件1</div>`,
});
var app = new Vue({
    el: '#app',
    data: {
        showChild: true
    }
});

这里的状态showChild绑定的是父组件的数据。
在子组件上绑定数据：

<div id="app">
    <child-component></child-component>
</div>

Vue.component('child-component', {
    template: `<div v-model="showChild">子组件</div>`,
    data() {
        return {
            showChild: true
        }
    }
});
var app = new Vue({
    el: '#app',
});

因此，slot分发的内容，作用域是在父组件上。
3、slot 用法
单个slot
在子组件内使用特殊的元素就可以为这个组件开启一个slot（插槽），在父组件模板里，插入在子组件标签内的所有内容将替代子组件的标签及它的内容。

<div id="app">
    <child-component>
        <p>分发的内容</p>
        <p>更多分发的内容</p>
    </child-component>
</div>

Vue.component('child-component', {
    template: `
    <div>
        <slot>
           <p>如果没有父组件插入内容，我将作为默认出现。</p>
        </slot>
    </div>
            `,
});
var app = new Vue({
    el: '#app',
});

子组件child-component的模板内定义了一个<slot>元素，并且用一个<p>作为默认的内容，在父组件没有使用slot时，会渲染这段默认的文本；如果写入了slot，就会替换整个。

子组件内的备用内容，它的作用域是子组件本身。

具名Slot
给<slot>元素指定一个name后可以分发多个内容，具名slot可以与单个slot共存。

<div id="app">
    <child-component>
        <h2 slot="header">标题</h2>
        <p>正文的内容</p>
        <p>更多正文的内容</p>
        <div slot="footer">底部信息</div>
    </child-component>
</div>

Vue.component('child-component', {
    template: `
<div class="container">
    <div class="header">
        <slot name="header"></slot>
    </div>
    <div class="main">
        <slot></slot>
    </div>
    <div class="footer">
        <slot name="footer"></slot>
    </div>
</div>    
    `,
});
var app = new Vue({
    el: '#app',
});

子组件内声明了3个<slot>元素，其中在<div class="main">内的<slot>没有使用name特性，它将作为默认slot出现，父组件没有使用slot特性的元素与内容都将出现在这里。

如果没有指定默认的匿名slot，父组件内多余的内容都将被抛弃。

在组合使用组件时，内容分发API至关重要。
4、作用域插槽
作用域插槽是一种特殊的slot，使用一个可以复用的模板替换已渲染元素。

<div id="app">
    <child-component>
        <template scope="props">
            <p>来自父组件的内容</p>
            <p>{{props.msg}}</p>
        </template>
    </child-component>
</div>

Vue.component('child-component', {
    template: `
<div class="container">
    <slot msg="来自子组件的内容"></slot>
</div> 
    `,
});
var app = new Vue({
    el: '#app',
});

子组件的模板，在<slot>元素上有一个类似props传递数据给组件的写法msg="xxx"，将数据传递到插槽。

父组件中使用了<template>元素，而且拥有一个scope="props"的特性，这里的props是一个临时变量。

template内可以通过临时变量props访问来自子组件插槽的数据msg。

作用域插槽更具代表性的用例是列表组件，允许组件自定义应该如何渲染列表每一项。

<div id="app">
    <my-list :book="books">
        <!--作用域插槽也可以是具名的Slot-->
        <template slot="book" scope="props">
            <li>{{props.bookName}}</li>
        </template>
    </my-list>
</div>

Vue.component('my-list', {
    props: {
        books: {
            type: Array,
            default: function () {
                return [];

            }
        }
    },
    template: `
<ul>
    <slot name="book" v-for="book in books" :book-name="book.name"></slot>
</ul>
    `,
});

子组件my-list接收一个来自父级的prop数组books，并且将它在name为book的slot上使用v-for指令循环，同时暴露一个变量bookName。
作用域插槽的使用场景是既可以复用子组件的slot，又可以使slot内容不一致。
5、访问slot
Vue 2.x提供了用来访问被slot分发的内容的方法$slots。

<div id="app">
    <child-component>
        <h2 slot="header">标题</h2>
        <p>正文的内容</p>
        <p>更多正文的内容</p>
        <div slot="footer">底部信息</div>
    </child-component>
</div>

Vue.component('child-component', {
    template: `
<div class="container">
    <div class="header">
        <slot name="header"></slot>
    </div>
    <div class="main">
        <slot></slot>
    </div>
    <div class="footer">
        <slot name="footer"></slot>
    </div>
</div>    
    `,
    mounted: function () {
        var header = this.$slots.header;
        var main = this.$slots.default;
        var footer = this.$slots.footer;
        console.log(footer);
        console.log(footer[0].elm.innerHTML);
    }
});
var app = new Vue({
    el: '#app',
});

通过$slots可以访问某个具名slot,this.$slots.default包括了所有没有被包含在具名slot中的节点。

五、组件高级用法
1、递归组件
给组件设置name选项，组件在它的模板内可以递归地调用自己。

<div id="app">
    <child-component :count="1"></child-component>
</div>

Vue.component('child-component', {
    name: 'child-component',
    props: {
        count: {
            type: Number,
            default: 1
        }
    },
    template: `
<div class="child">
    <child-component :count="count+1" v-if="count<3"></child-component>
</div>
    `,
});

组件递归使用可以用来开发一些具有未知层级关机的独立组件，比如级联选择器和树形控件等。

2、内联模板
组件的模板一般都是在template选项内定义的，Vue提供了一个内联模板的功能，在使用组件时，给组件标签使用inline-template特性，组件就会把它的内容当做模板，而不是把它当内容分发，这让模板更灵活。

<div id="app">
    <child-component inline-template>
        <div>
            <h2>在父组件中定义子组件的模板</h2>
            <p>{{message}}</p>
            <p>{{msg}}</p>
        </div>
    </child-component>
</div>

Vue.component('child-component', {
    data() {
        return {
            msg: '在子组件中声明的数据'
        }
    }
});
var app = new Vue({
    el: '#app',
    data: {
        message: '在父组件中声明的数据'
    }
});

在父组件中声明的数据message和子组件中声明的数据msg，两个都可以渲染（如果同名，优先使用子组件的数据）。这是内联模板的缺点，就是作用域比较难理解，如果不是非常特殊的场景，建议不要轻易使用内联模板。
3、动态组件
Vue.js提供了一个特殊的元素<component>用来动态地挂载不同的组件，使用is特性来选择要挂载的组件。

<div id="app">
    <button @click="handleChangeView('A')">切换到A</button>
    <button @click="handleChangeView('B')">切换到B</button>
    <button @click="handleChangeView('C')">切换到C</button>
    <component :is="currentView"></component>
</div>

var app = new Vue({
    el: '#app',
    data: {
        currentView: 'comA'
    },
    components: {
        comA: {
            template: `<div>组件A</div>`
        },
        comB: {
            template: `<div>组件B</div>`
        },
        comC: {
            template: `<div>组件C</div>`
        },
    },
    methods: {
        handleChangeView: function (component) {
            this.currentView = 'com' + component
        }
    }
});

可以直接绑定在组件对象上：

<div id="app">
    <component :is="currentView"></component>
</div>

var Home = {
    template: `<p>Welcome home!</p>`
};

var app = new Vue({
    el: '#app',
    data: {
        currentView: Home
    }
});

4、异步组件
Vue.js允许将组件定义为一个工厂函数，动态地解析组件。

Vue.js只在组件需要渲染时触发工厂函数，并且把结果缓存起来，用于后面的再次渲染。

<div id="app">
    <child-component></child-component>
</div>

Vue.component('child-component', function (resolve, reject) {
    window.setTimeout(function () {
        resolve({
            template: `<div>我是异步渲染的！</div>`
        })
    }, 1000)
});

var app = new Vue({
    el: '#app',
});

工厂函数接收一个resolve回调，在收到从服务器下载的组件定义时调用。也可以调用reject(reason)指示加载失败。
6 、其他
1、$nextTick
异步更新队列

Vue在观察到数据变化时并不是直接更新DOM，而是开启一个队列，并缓冲在同一个事件循环中发生的所有数据变化。在缓冲时会去除重复数据，从而避免不必要的计算和DOM操作。然后，在一下个事件循环tick中，Vue刷新队列并执行实际（已去重的）工作。

Vue会根据当前浏览器环境优先使用原生的Promise.then和MutationObserver，如果都不支持，就会采用setTimeout代替。

$nextTick就是用来确定什么时候DOM更新已经完成。

<div id="app">
    <div id="div" v-if="showDiv">这是一段文本</div>
    <button @click="getText">获取div内容</button>
</div>

var app = new Vue({
    el: '#app',
    data: {
        showDiv: false
    },
    methods: {
        getText: function () {
            this.showDiv = true;
            this.$nextTick(function () {
                var text = document.getElementById('div');
                console.log(text.innerHTML);
            })
        }
    }
});

2、X-Templates
Vue提供了另一种定义模板的方式，在

<div id="app">
    <my-component></my-component>
    <script type="text/x-template" id="my-component">
        <div>这是组件的内容</div>
    </script>
</div>

Vue.component('my-component', {
    template: `#my-component`,
});
var app = new Vue({
    el: '#app',
});

3、手动挂载实例
在一些非常特殊的情况下，需要动态地创建Vue实例，Vue提供了Vue.extend和$mount两个方法来手动挂载一个实例。

Vue.extend是基础Vue构造器，创建一个“子类”，参数是一个包含组件选项的对象。

如果Vue实例在实例化时没有收到el选项，它就处于“未挂载”状态，没有关联的DOM元素。可以使用$mount手动地挂载一个未挂载的实例。这个方法返回实例自身，因而可以链式调用其他实例方法。

<div id="app"></div>

var MyComponent = Vue.extend({
    template: `<div>Hello {{name}}</div>`,
    data() {
        return {
            name: 'Andy'
        }
    }
});
new MyComponent().$mount('#app');

除了以上写法外，还有两种写法：

new MyComponent().$mount("#app");

new MyComponent({
    el: '#app'
})

手动挂载实例（组件）是一种比较极端的高级用法，在业务中几乎用不到，只在开发一些复杂的独立组件时可能会使用。