Vue学习记录-slot的使用

slot的使用

基本使用

<div id="app">
    <cpn><button>按钮</button></cpn>
    <cpn><span>a</span></cpn>
    <cpn></cpn>
  </div>

  <template id="cpn">
    <div>
      <h2>组件</h2>
      <slot></slot>
    </div>
  </template>
  <script src="../js/vue.js">
  </script>
  <script>
     const app = new Vue({
        el: '#app',
        data: {
          message: 'hello'
        },
        components: {
          cpn: {
            template: '#cpn',

          },
        }
     })
  </script>

具名slot

<div id="app">
    <cpn><button slot="center">中</button></cpn>
   
  </div>

  <template id="cpn">
    <div>
    
     <slot name="left">  <span>左</span></slot>
     <slot name="center"><span>中</span></slot>
     <slot name="right"><span>右</span></slot>
    </div>
  </template>
  <script src="../js/vue.js">
  </script>
  <script>
     const app = new Vue({
        el: '#app',
        data: {
          message: 'hello'
        },
        components: {
          cpn: {
            template: '#cpn',

          },
        }
     })
  </script>