P18. vue 插槽的基本使用

基本用法

• App.vue

  <script>
  import Content from "./components/Content.vue";
  export default {
    data() {
      return {
        message: '',
      };
    },
    methods:{
      getChildMsg:function (value){
        console.log(value);
        this.message=value
      }
    },
    components:{
      Content
    }
  }
  
  </script>
  
  <template>
  <div>
    <Content><button>btn</button></Content>
    <Content><input type="text"></Content>
  </div>
  
  </template>
  
  

• Content.vue

<template>
  <div>
    <h2>I am content</h2>
    <div>
      <slot></slot>
    </div>

  </div>
</template>

具名插槽

• App.vue

  <script>
  import Content from "./components/Content.vue";
  export default {
    data() {
      return {
        message: '',
      };
    },
    methods:{
      getChildMsg:function (value){
        console.log(value);
        this.message=value
      }
    },
    components:{
      Content
    }
  }
  
  </script>
  
  <template>
  <div>
    <Content><button>btn</button></Content>
    <Content><input type="text"><button>btn2</button></Content>
    <Content>
      <template v-slot:button><button>btn4</button></template>
      <template v-slot:input><input type="text"></template>
      <template v-slot:h2><h2>插槽</h2></template>
    </Content>
  
  
  </div>
  
  </template>
  
  

• Content.vue

<template>
  <div>
    <h2>I am content</h2>
    <div>
      <slot name="button"></slot>
      <slot name="input"></slot>
      <slot name="h2"></slot>
    </div>

  </div>
</template>

作用域

备用内容

• App.vue

• Content.vue

<template>
  <div>
    <h2>I am content</h2>
    <div>
      <!-- 会在没有值的插槽中显示-->
      <slot name="button"><button>备用内容</button></slot>
      <slot name="input"></slot>
      <slot name="h2"></slot>
    </div>

  </div>
</template>

渲染作用域

• test

• App.vue

<script>
  import Content from "./components/Content.vue";
  export default {
    data() {
      return {
        message: 'hellokugou',
      };
    },
    methods:{
      getChildMsg:function (value){
        console.log(value);
        this.message=value
      }
    },
    components:{
      Content
    }
  }

</script>

<template>
  <div>
    <Content><button>btn</button></Content>
    <Content><input type="text"><button>btn2</button></Content>
    <Content>
      <template v-slot:button> </template>
      <template v-slot:input><input type="text"></template>
      <template v-slot:h2><h2>插槽</h2></template>

    </Content>
    <!-- 无序-->
    <Content>
      <template v-slot:default="slotProps">
        <ul>
          <li v-for="item in slotProps.list" :key="item">{{item}}</li>
        </ul>
      </template>
    </Content>
    <!-- 有序-->
    <Content>
      <template v-slot:default="slotProps">
        <ol>
        <li v-for="item in slotProps.list" :key="item">{{item}}</li>
      </ol>
      </template>
    </Content>

  </div>

</template>

• Content.vue

<template>
  <div>
    <h2>I am content</h2>
    <div>
      <!-- 会在没有值的插槽中显示-->
<!--      <slot name="button"><button>备用内容</button></slot>-->
<!--      <slot name="input"></slot>-->
<!--      <slot name="h2"></slot>-->
      <slot :list="list" :message="message"></slot>
    </div>

  </div>
</template>


<script>
export default {
  data(){
    return{
      message: '你好宝贝',
      list: [1,2,3,4,5,6]
    }
  }
}
</script>