Vue学习记录-slot的使用

slot的使用

基本使用

<div id="app">
    <cpn><button>按钮button>cpn>
    <cpn><span>aspan>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>