2020-11-30 Vue-11元件化高階-slot

coderLcy發表於2020-12-20
Vue元件化

68

 

<div id="app">
  <cpn></cpn>
  <cpn>
    <button>按鈕</button>
  </cpn>
  <cpn>
    <i>呵呵</i>
  </cpn>
  <cpn>
    <h2>Bryant</h2>
    <p>Kobe</p>
  </cpn>
</div>
<template id="cpn">
  <div>
    <h2>我是元件</h2>
    <p>我是元件，哈哈哈</p>
    <h2>----------------------------</h2>
    <slot>
      <button>按鈕</button>
    </slot>
  </div>
</template>

<script src="../js/vue.js"></script>
<script>
  const app = new Vue({
    el: '#app',
    data: {
      firstName: 'Bryant',
    },
    components: {
      cpn: {
        template: '#cpn'
      }
    }
  })
</script>

 

 

 

69-具名插槽的使用

<div id="app">
  <cpn>
    <span slot="m">center</span>
    <span>最後一個</span>
  </cpn>
</div>

<template id="cpn">
  <div>
    <h2>我是元件</h2>
    <!-- <slot></slot> -->
    <slot name="l"><span>left</span></slot>
    <slot name="m"><span>mid</span></slot>
    <slot name="r"><span>right</span></slot>
    <slot><span>最後一個</span></slot>
  </div>
</template>

<script src="../js/vue.js"></script>
<script>
  const app = new Vue({
    el: '#app',
    data: {
      firstName: 'Bryant',
    },
    components: {
      cpn: {
        template: '#cpn'
      }
    }
  })
</script>

 

 

70

 

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

<template id="cpn">
  <div>
    <h2>我是子元件</h2>
    <h2>哈哈哈</h2>
    <button v-show="isShow">子元件</button>
  </div>
</template>

<script src="../js/vue.js"></script>
<script>
  const app = new Vue({
    el: '#app',
    data: {
      firstName: 'Bryant',
      isShow: true
    },
    components: {
      cpn: {
        template: '#cpn',
        data(){
          return {
           isShow: false
          }
        }
      }
    }
  })
</script>

 

 

 

71

<div id="app">
  <cpn></cpn>
  <cpn>
    <!-- 目的是獲取子元件裡面的pLanguages -->
    <template slot-scope="slot">
      <span v-for="item in slot.data0">{{item}}-</span>
    </template>
  </cpn>
  <cpn>
    <template slot-scope='slot'>
      <span>{{slot.data0.join(' - ')}}</span>
    </template>
  </cpn>
</div>

<template id="cpn">
  <div>
    <slot :data0="pLanguages">
      <ul>
        <li v-for="item in pLanguages">{{item}}</li>
      </ul>
    </slot>
  </div>
</template>

<script src="../js/vue.js"></script>
<script>
  const app = new Vue({
    el: "#app",
    data: {
      firstName: 'Bryant'
    },
    components: {
      cpn: {
        template: '#cpn',
        data(){
          return {
            pLanguages: ['JavaScript','C++','Java','Python','Go','Swift']
          }
        }
      }
    }
  })
</script>

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

相關文章