Vue学习--插槽（三）

插槽

没有插槽的情况

<!-- 没有插槽的情况 -->
<div id="app">
  <child>
    <span>1111</span>
  </child>
</div>


<script>
  // 注册子组件
  Vue.component("child", {
    template: "<div>这是一个div标签</div>"
  });

  // 初始化父组件
  new Vue({
    el: "#app"
  });
</script>
<!--
发现模板里的span标签会被替代为<div>这是一个div标签</div>
-->

有插槽的情况 

<!-- 有插槽的情况 -->
<div id="app">
  <child>
    <span>1111</span>
  </child>
</div>


<script>
  // 注册子组件
  Vue.component("child", {
    template: "<div>这是<slot></slot>一个div标签</div>"
  });

  // 初始化父组件
  new Vue({
    el: "#app"
  });
</script>
<!--
使用 slot标签 ，可以将<span>1111</span>，
放到子组件中想让他显示的地方
-->

多个标签的情况下

<!-- 多个标签的情况下 -->
<div id="app">
  <child>
    <span>1111</span>
    <i>2222</i>
    <b>3333</b>
  </child>
</div>


<script>
  // 注册子组件
  Vue.component("child", {
    template: "<div>这是<slot></slot>一个div标签</div>"
  });

  // 初始化父组件
  new Vue({
    el: "#app"
  });
</script>
<!--
即使有多个标签，会一起被插入，相当于用父组件放在子组件里的标签，
替换了<slot></slot>这个标签
-->

具名插槽 

<!-- 具名插槽 -->
<!--
  1.父组件在要分发的标签里添加slot="xxx"属性
  2.子组件在对应分发的位置的slot标签里，添加name="xxx"属性
  3.然后就会将对应的标签放在对应的位置了
-->
<div id="app">
  <child>
    <span slot="one">1111</span>
    <i slot="two">2222</i>
    <b slot="three">3333</b>
  </child>
</div>


<script>

  // 注册子组件
  Vue.component("child", {
    template: `<div>
                    这是
                    <slot name='one'></slot>
                    一个
                    <slot name='two'></slot>
                    div
                    <slot name='three'></slot>
                    标签
                </div>`
  });


  // 初始化父组件
  new Vue({
    el: "#app"
  });
</script>

没有slot属性

<!-- 没有slot属性 -->
<!--
如果子组件标签中没有slot属性，将会显示默认的值
-->
<div id="app">
  <child>
    &lt;!&ndash; <span slot="one">1111</span> &ndash;&gt;
    <i slot="two">2222</i>
    &lt;!&ndash; <b slot="three">3333</b> &ndash;&gt;
  </child>
</div>

<script>
  // 注册子组件
  Vue.component("child", {
    template:   `<div>
                      <slot name='one'>no one</slot>
                      <slot name='two'>no two</slot>
                      <slot name='three'>no three</slot>
                 </div>`

  });

  // 初始化父组件
  new Vue({
    el: "#app"
  });
</script>
<!--
slot="two" 就被插到固定的位置上
-->

插槽简单实例应用

<!-- 插槽简单实例应用 -->
<!--
想想你的电脑主板上的各种插槽，
有插CPU的，有插显卡的，有插内存的，有插硬盘的，
所以假设有个组件是computer，其模板是template
-->

<div id="app">
  <computer>
    <div slot="CPU">Intel Core i7</div>
    <div slot="GPU">GTX980Ti</div>
    <div slot="Memory">Kingston 32G</div>
    <div slot="Hard-drive">Samsung SSD 1T</div>
  </computer>
</div>

<script>
  // 注册子组件
  Vue.component("computer", {
    template:   `<div>
                      <slot name="CPU">这儿插你的CPU</slot>
                      <slot name="GPU">这儿插你的显卡</slot>
                      <slot name="Memory">这儿插你的内存</slot>
                      <slot name="Hard-drive">这儿插你的硬盘</slot>
                 </div>`
  });

  // 初始化父组件
  new Vue({
    el: "#app"
  });
</script>

 作用域插槽（2.1.0新增）

<!-- 作用域插槽（2.1.0新增） -->
<!--
作用域插槽是一种特殊类型的插槽，用作一个 (能被传递数据的) 可重用模板，
来代替已经渲染好的元素。

1.在子组件中，只需将数据传递到插槽，就像你将 PRop 传递给组件一样
2.在父组件中，通过 slot-scope="scoped" 的形式，获取子组件传递过来的数据，
该数据对象的别名为 scoped。这就是作用域插槽的模板。
-->
<div id="app">
  <child>
    <!-- 2. 接收myName数据，scoped 为 { "myName": "猫老板的豆" } -->
    <template slot="content" slot-scope="scoped">
      <div>{{ scoped.myName }}</div>
    </template>
  </child>
</div>

<script>
  Vue.component('child', {
    data () {
      return {
        myName: '猫老板的豆'
      }
    },
    template: `<slot name="content" :myName="myName"></slot>`   // 1. 对外抛出 myName 数据
  })

  new Vue({
    el: "#app"
  });
</script>