Vue学习之路(7) 插槽测试

引言

测试基于vue初始化的脚手架,不加router等其他的,使用index.html,编辑的入口main.js,结合控制台和页面观察输出结果,学习选项的使用

单个插槽

// The Vue build version to load with the `import` command
// (runtime-only or standalone) has been set in webpack.base.conf with an alias.
import Vue from 'vue'

Vue.config.productionTip = false

Vue.component("my-component",{
  template:`<div>
  <h2>我是子组件的标题</h2>
  <slot>
    只有在没有要分发的内容时才会显示。
  </slot>
</div>
  `
})
/* eslint-disable no-new */
// new Vue({
//   el: '#app',
//   template:`
//   <div>
//   <h1>我是父组件的标题</h1>
//   <my-component>
//     <p>这是一些初始内容</p>
//     <p>这是更多的初始内容</p>
//   </my-component>
// </div>
//   `
// })
new Vue({
  el: '#app',
  template:`
  <div>
  <h1>我是父组件的标题</h1>
  <my-component>
  </my-component>
</div>
  `
})

//有内容时渲染结果
<div>
    <h1>我是父组件的标题</h1>
    <div>
        <h2>我是子组件的标题</h2>
        <p>这是一些初始内容</p>
        <p>这是更多的初始内容</p>
    </div>
</div>

//没有内容渲染结果
<div>
    <h1>我是父组件的标题
    </h1> 
    <div>
        <h2>我是子组件的标题</h2> 
        只有在没有要分发的内容时才会显示。
     </div>
 </div>。

具名插槽

// The Vue build version to load with the `import` command
// (runtime-only or standalone) has been set in webpack.base.conf with an alias.
import Vue from 'vue'

Vue.config.productionTip = false

Vue.component("app-layout",{
  template:`<div class="container">
  <header>
    <slot name="header">header 没有内容显示</slot>
  </header>
  <main>
    <slot>main 没有内容显示</slot>
  </main>
  <footer>
    <slot name="footer">footer 没有内容显示</slot>
  </footer>
</div>
  `
})
/* eslint-disable no-new */

// new Vue({
//   el: '#app',
//   template:`
//   <app-layout>
//   <h1 slot="header">这里可能是一个页面标题</h1>
//
//   <p>主要内容的一个段落。</p>
//   <p>另一个主要段落。</p>
//
//   <p slot="footer">这里有一些联系信息</p>
// </app-layout>
//   `
// })
// new Vue({
//   el: '#app',
//   template:`
//   <app-layout>
//   <h1 slot="header">这里可能是一个页面标题</h1>
//
//   <p>主要内容的一个段落。</p>
//   <p>另一个主要段落。</p>
//
//   <p slot="footer">这里有一些联系信息</p>
// </app-layout>
//   `
// })

// new Vue({
//   el: '#app',
//   template:`
//   <app-layout>
//
//   <p>主要内容的一个段落。</p>
//   <p>另一个主要段落。</p>
//
//   <p slot="footer">这里有一些联系信息</p>
// </app-layout>
//   `
// })
new Vue({
  el: '#app',
  template:`
  <app-layout>
  <h1 slot="header">这里可能是一个页面标题</h1>

  <p>主要内容的一个段落。</p>
  <p>另一个主要段落。</p>

</app-layout>
  `
})

渲染结果如下
<div class="container">
    <header>
        <h1>这里可能是一个页面标题</h1>
    </header> 
    <main> 
        <p>主要内容的一个段落。</p> <p>另一个主要段落。</p>
    </main> 
    <footer>
        footer 没有内容显示
    </footer>
</div>

作用域插槽

// The Vue build version to load with the `import` command
// (runtime-only or standalone) has been set in webpack.base.conf with an alias.
import Vue from 'vue'

Vue.config.productionTip = false

//作用域插槽是一种特殊类型的插槽，用作一个 (能被传递数据的) 可重用模板，来代替已经渲染好的元素。
//在子组件中，只需将数据传递到插槽，就像你将 prop 传递给组件一样：

Vue.component("child",{
  template:`<div class="child">
  <slot text="hello from child"></slot>
</div>
  `
})
//在父级中，具有特殊特性 slot-scope 的 <template> 元素必须存在，
// 表示它是作用域插槽的模板。slot-scope 的值将被用作一个临时变量名，
// 此变量接收从子组件传递过来的 prop 对象：

new Vue({
  el: '#app',
  template:`
 <div class="parent">
  <child>
    <template slot-scope="props">
      <p>hello from parent</p>
      <p>{{ props.text }}</p>
    </template>
  </child>
</div>
  `
})

渲染结果:
<div class="parent">
    <div class="child">
        <p>hello from parent</p>
        <p>hello from child</p>
    </div>
</div>

//在 2.5.0+，slot-scope 能被用在任意元素或组件中而不再局限于 <template>。

//作用域插槽更典型的用例是在列表组件中，允许使用者自定义如何渲染列表的每一项：
//列表组件的模板：

Vue.component("my-awesome-list",{
  template:`<ul>
  <slot name="item"
    v-for="item in items"
    :text="item.text">
    <!-- 这里写入备用内容 -->
  </slot>
</ul>
  `,
  props:['items']
})

new Vue({
  el: '#app',
  template:`
 <my-awesome-list :items="items">
  <!-- 作用域插槽也可以是具名的 -->
  <li
    slot="item"
    slot-scope="props"
    class="my-fancy-item">
    {{ props.text }}
  </li>
</my-awesome-list>
  `,
  data: function () {
    return {
      items : [
        {
          text:'text3',
          value:'value3'
        },
        {
          text:'text4',
          value:'value4'
        }
      ]
    }
  }
})