插槽-动态插槽名
程序员文章站
2022-05-15 13:45:22
...
<div id="demo">
<base-com>
<template v-slot:[dynamicslotname]>
This is Me.
</template>
</base-com>
</div>
<script>
Vue.component('base-com',{
template:`
<div>
<header style="font-size=20px">
<slot name="header"></slot>
</header>
<footer style="font-size=20px">
<slot name="footer"></slot>
</footer>
</div>
`
})
var vm = new Vue({
el:"#demo",
data:{
dynamicslotname:'header'
}
})
</script>
上一篇: 处理边界情况-访问根实例
下一篇: Vue教程(八)v-bind指令动态绑定