vue插槽的使用

一、插槽的基本使用

二、具名插槽的使用

三、编译作用域的例子

四、作用域插槽

一、插槽的基本使用

    1.插槽的基本使用<slot></slot>

    2.插槽的默认值<slot>button</slot>

    3.如有多个值，同时放入到组件进行替换时，一起作为替换元素

<div id="app">
    <h1>我是父组件</h1>
    <cpn><button>按钮</button></cpn>
    <cpn><span>span标签</span></cpn>
    <cpn><input type="text"></cpn>
    <cpn>
      <i>我这有这么多</i>
      <span>wo</span>
      <button>666</button>
    </cpn>
    <cpn></cpn>
  </div>
  <template id="templ">
    <div>
      <h2>我是组件</h2>
      <p>我是组件啊啊啊啊啊</p>
      <slot><button>我是默认值</button></slot><!--插槽的默认值-->
    </div>
  </template>
  <script src="/js/vue.js"></script>
  <script>
    const vm = new Vue({
      el:'#app',
      data:{},
      components:{
        cpn:{
          template:"#templ"
        }
      }
    });
  </script>

插槽的基本使用

二、具名插槽的使用

<!--导航栏效果 分为左中右-->
  <div id="app">
    <!-- 替换中间的 -->
    <cpn><input type="text" placeholder="搜索" slot="center"></cpn>
    <!-- 替换左边的 -->
    <cpn><button slot="left">返回</button></cpn>
    <!-- 替换右边的 -->
    <cpn><button slot="right">前进</button></cpn slot="right">
  </div>

  <template id="templ">
    <div>
      <slot name = "left"><span>左边</span></slot>
      <slot name = "center"><span>中间</span></slot>
      <slot name="right"><span>我是默认值</span></slot><!--插槽的默认值-->
    </div>
  </template>

具名插槽

上面的方法是旧的，已弃用。

三、编译作用域的例子

<div id="app">
    <cpn v-show="isShow"></cpn>
  </div>

  <template id="templ">
    <div>
      <h2>我是子组件</h2>
      <p>我是组件啊啊啊啊啊</p>
      <button v-show="isShow">我用的是组件里的data</button>
    </div>
  </template>
<!-- 不关心你用的是哪个组件，看你是在哪个模板 -->
  <script src="/js/vue.js"></script>
  <script>
    const vm = new Vue({
      el:'#app',
      data:{
        isShow:true//模板里是按照这个来的。
      },
      components:{
        cpn:{
          template:"#templ",
          data(){
            return{
              isShow:false//子组件中是使用这个值
            }
          }
        }
      }
    });

什么是编译作用域

四、作用域插槽

 <div id="app">
    <cpn></cpn>
    <!-- 父组件在展示时希望中间以其他形式分割 -->
    <!-- 目的:获取子组件中的lang
    vue2.5.x以下要用<template></template>模板-->
    <cpn>
      <template slot-scope="slot">
        <span v-for="items in slot.data">{{items}}-</span>
      </template>
    </cpn>
    <cpn>
      <template slot-scope="slot">
        <span>{{slot.data.join(' * ')}}</span>
      </template>
    </cpn>
  </div>

  <template id="templ">
    <div>
      <slot :data="lang">
        <ul>
          <li v-for="items in lang">{{items}}</li>
        </ul>
      </slot>
    </div>
  </template>
  <!-- 父组件替换插槽的标签，内容由子组件来提供 -->
  <script src="/js/vue.js"></script>
  <script>
    const vm = new Vue({
      el:'#app',
      data:{
      },
      components:{
        cpn:{
          template:"#templ",
          data(){
            return{
              lang:['JavaScript','C++','Python','Java','Go']
            }
          },
          created(){
            // this.lang.join(' - ');
          }
        }
      }
    });
 </script>
    

作用域插槽

上面的方法是旧的，已弃用。