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插槽最基本的理解,希望各位大神多提意见,感谢对本人的支持,谢谢
网友评论