vue插槽

vue插槽使用

1.基本插槽实现
父级设置

<template>
  <div>
    <list url="/profile">
        <button>插槽</button>
        <div>可以点吗</div>
        </list>
  </div>
</template>
<script>
import list from "./HelloWorld2.vue";
export default {
    name: "HelloWorld",
    components:{
        list
    },
 }
</script>

子级设置

<template>
  <div>
    <a  v-bind:href="url" class="nav-link" >
        <slot></slot>
    </a>
  </div>
</template>
<script>
export default {
  name: "HelloWorld2",
  data() {
    return {
        url:'[https://www.baidu.com/?tn=92150826_hao_pg](https://www.baidu.com/?tn=92150826_hao_pg)
'
    };
  },
 }
</script>

2、使用name设置插槽显示隐藏
父组件使用v-slot绑定

<template>
  <div>
    <list v-solt:head-left url="/profile">
        <button>插槽</button>
        <div>可以点吗</div>
        </list>
  </div>
</template>
<script>
import list from "./HelloWorld2.vue";
export default {
    name: "HelloWorld",
    components:{
        list
    },
 }
</script>

子组件使用name来定义

<template>
  <div>
    <a  v-bind:href="url" class="nav-link" >
        <slot name="head-left"></slot>
    </a>
  </div>
</template>
<script>
export default {
  name: "HelloWorld2",
  data() {
    return {
        url:'[https://www.baidu.com/?tn=92150826_hao_pg](https://www.baidu.com/?tn=92150826_hao_pg)
'
    };
  },
 }
</script>

这是小编对vue插槽最基本的理解，希望各位大神多提意见，感谢对本人的支持，谢谢