插槽的基础使用，<slot></slot>
<body>
<div id="app">
<!-- 组件多样化 ,子组件填写了内容就会代替slot里的内容，未填写则用定义好的默认值-->
<cpn><button>aaa</button></cpn>
<cpn><i>sssss</i></cpn>
<cpn></cpn>
</div>
<template id="cpn">
<div>
<!-- 给个插槽默认值 -->
<slot><button>默认值</button></slot>
</div>
</template>
<script>
new Vue({
el: '#app',
components: {
cpn: {
template: '#cpn',
}
}
})
</script>
网友评论