Vue_插槽语法基础

Vue: P 70——>插槽语法及前端模块化

70_插槽的基本使用

在子组件内添加插槽增加组件的可拓展性

   <template id="cpn">
       <div>
           <h2>组件</h2>
           <p>定义组件模板</p>
           <slot><button>默认值</button></slot>
           <!-- 当插槽没有传值时默认传 Solt 内的值 -->
       </div>
   </template>

当 slot 没有默认值时传入默认值，当:

   <div id="app">
      <cpn><button>插槽按钮</button></cpn>
      <cpn><span>插槽 span</span></cpn>
      <cpn><p>插槽 p 字段</p></cpn>
      <cpn>
          <p>而当插槽内有多个元素时</p>
          <div> 插槽会将所有元素全部都展示出来</div>
      </cpn>
   </div>

传入父组件的值.在 Vue 实例中进行注册,当有多个元素时多个元素都会展示。

   const app = new Vue({
   el: '#app',
   data: {
      message: '你好啊'
   },
   components: {
       cpn: {
           template: '#cpn'
       }
   }
})

---

71_具名插槽的使用

使用 name 绑定子组件

   <template id="cpn">
       <div>
          <slot></slot>
          <!-- 父组件传值只会替换没有 name 值的 slot -->
          <slot name="left"><span>左边</span></slot>
          <slot name="center"><span>中间</span></slot>
          <slot name="right"></slot><span>右边</span></slot>
       </div>
   </template>

在父组件中替换即可

   <div id="app">
      <cpn>
         <span slot="center">
            <!-- 判断 name 相同则替换 -->
            标题
         </span>
      </cpn>
   </div>

---

72_编译作用域

组件的作用域对应的组件，父组件的元素不影响子组件

组件编译作用域的概念

使用插槽展示数据:

   components: {
       cpn: {
           template: '#cpn',
           data() {
               return {
                   planguages: ['one','two','three','four','five','six']
               }
           }
       }
   }

在子组件中对数据进行获取:

   <template id="cpn">
       <div>
           <!-- 获取子组件的 planguages-->
           <slot :data="planguages">
               <!-- 将展示的格式封装成插槽 -->
           <ul>
              <li v-for="item in planguages">{{item}}</li>
          </ul>              
           </slot>
       </div>
   </template>

在父组件中进行不同格式的展示:

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

      <cpn>
        <template slot-scope="slot">
            <!-- <span v-for="item in slot.data">{{item}} -</span> -->
            <span>{{slot.data.join(' _ ')}}</span>
            <!-- data数据取决于子组件 slot 插槽中定义的值-->
            <!-- .join添加每个值之间的间隔符号 -->
        </template>
    </cpn>

      <cpn>
          <template slot-scope="slot">
              <span v-for="item in slot.data">{{item}} *</span>
          </template>
      </cpn>
   </div>

.join 在展示的每条数据中插入间隔符