vue slot scope使用_Vue使用日记（10）：插槽slot的使用

在进行插槽的说明之前，先对一个概念进行说明：编译作用域。

1、编译作用域

官方给出的解析是：父模板里的所有内容都是在父级作用域中编译的；子模板里的所有内容都是在子作用域中编译的。

举一个例子：

<div id="app">    <my-cpn v-show="isShow">my-cpn>div><template id="myCpn">    <h2>能否显示出来呢h2>template><script>    Vue.component('my-cpn',{        template:"#myCpn",        data() {            return {                isShow:false            }        }    }    let app = new Vue({        el:"#app",        data: {            isShow:true        }    })script>

说明：这里的组件能正常显示出来，说明使用的是Vue实例身上的isShow属性。

1)isShow属性包含在子组件中，也包含在Vue实例中；

2)最终可以渲染出来，也就是说使用的是Vue实例的属性；

3)使用的时候，是在父组件(Vue实例)中使用，那么它的作用域就是父组件；

4)所以使用的是Vue实例中的isShow属性，而不是子组件的。

2、插槽：slot

        生活中有很多类似于插槽概念的事物：电脑的USB，插座的电源插槽，电脑主板插槽等等。这些插槽的出现，目的是让我们的设备具有更多的可扩展性。比如电脑的USB可以使用我们插入U盘、手机、键盘、鼠标和其他外接设备。

        组件的插槽也是出于同一个目的——使我们封装的组件具有可扩展性，让使用者决定组件内部到底展示什么内容。

        举个例子，移动网站中的导航栏。移动开发中，几乎每个页面都会有导航栏，导航栏必然要封装成一个组件，比如名为nav-bar，一旦封装好了这个组件，我们就可以在其他页面复用。但是，每个页面的导航栏都长得一样吗？不是的，比如京东M站的导航栏。

说明：我们发现各个页面的导航栏组件的内容是不相同的，但是同一个组件却在多个页面使用了，也就是说它既实现了可复用性，又实现了可扩展性。我们要怎样实现组件的可复用性和可扩展性呢？答案就是使用插槽。

如何利用插槽实现上述这类组件的封装呢？

        原则是：抽取共性，保留不同。

        像上面的导航栏组件，共性有很多，不同点也有很多。比如都是分为左中右三个部分，高度宽度这些都相同。但是每一部分内容都不同：有些是返回按钮，有些却是菜单按钮；中间部分有些是搜索框，有些是标题等等。

使用slot的步骤：

1)在子组件中，使用特殊的元素就可以为子组件开启一个插槽；

2)该插槽插入什么内容取决于父组件如何使用。

注意：是在父组件使用子组件时，在父组件环境内将子组件的插槽替换成其他内容。

先从一个简单的例子说明slot的使用：

<div id="app">    <my-cpn>my-cpn>    <my-cpn>        <h2>我是用来替换插槽默认内容的内容h2>    my-cpn>div><template id="myCpn">    <div>        <slot>我是插槽的默认内容slot>    div>template><script>    Vue.component('my-cpn',{        template:"#myCpn"    }    let app = new Vue({        el:"#app"    })script>

说明：在父组件中(Vue实例中)使用组件，父组件中如果没有在组件中插入内容，则显示插槽的默认内容，否则替换插槽的默认内容。注意，插槽slot元素外部要使用根元素，一般使用div元素。

3、具名插槽

上面的例子中只简单地使用了一个插槽，但是当子组件的功能复杂时，子组件的插槽可能并非只有一个。比如上面的京东导航栏组件，封装时可能就需要三个插槽，分别代表左边、中间、右边。

那么，外面(父组件)在给插槽插入内容时，如何区分替换的是哪一个呢？

这个时候，我们就需要给插槽起一个名字。

这种具有名字的插槽就称为具名插槽。

具名插槽使用步骤：

1)非常简单，只要给slot元素一个name属性即可；

2)例如：；

3)替换时，使用slot属性指出名字即可：slot="left">返回。

举例说明：

<div id="app">    <my-cpn>        <span slot="left">返回span>        <span slot="center">标题span>        <span slot="right">菜单span>    my-cpn>div><template id="myCpn">    <div>        <slot name="left">我是左边slot>        <slot name="center">我是中间slot>        <slot name="right">我是右边slot>    div>template><script>    Vue.component('my-cpn',{        template:"#myCpn"    }    let app = new Vue({        el:"#app"    })script>

说明：这里将子组件中的插槽分别根据名字(left、center、right)替换成不同的内容：返回、标题和菜单，当然这里只是简单的封装和使用了导航栏组件。

另外，也可以只替换其中一部分插槽，例如：

<my-cpn>    <span slot="left">返回span>my-cpn>

4、作用域插槽

某些情况下，我们需要父组件仅仅替换标签元素，但是内容由子组件提供，这种插槽称为作用域插槽。

总结就是：父组件替换插槽的标签，但是内容由子组件来提供。

举例说明：

<div id="app">    <my-cpn>        <template slot-scope="slotData">            <ul>                <li v-for="info in slotData.data">{{info}}li>            ul>        template>    my-cpn>div><template id="myCpn">    <div>        <slot :data="pLanguages">slot>    div>template><script>    Vue.component('my-cpn',{        template:"#myCpn",        data(){            return {                pLanguages:['JavaScript', 'Python', 'Swift', 'Go', 'C++']            }        }    }script>

说明：

1)子组件中的插槽绑定了data，并将pLanguages赋值给它；

2)然后在父组件中通过特定的指令slot-scope获取子组件绑定的属性，该指令后面的slotData是允许任意取的名字；

3)接着从slotData中取出子组件插槽绑定的data值：slotData.data。

注意：子组件中绑定属性时，属性名字不能是name这种特殊含义的名词，可以使用data、age、height这些普通含义的名词，因为name具有特殊含义，比如指代具名插槽，使用name会出错。

然后在第三步取值时这样取：slotData.data、slotData.age、slotData.height……

以上，是Vue插槽的使用说明，后续将对Vue其他知识点进行总结说明。