slot的使用
基本使用
<div id="app">
<cpn><button>按钮</button></cpn>
<cpn><span>a</span></cpn>
<cpn></cpn>
</div>
<template id="cpn">
<div>
<h2>组件</h2>
<slot></slot>
</div>
</template>
<script src="../js/vue.js">
</script>
<script>
const app = new Vue({
el: '#app',
data: {
message: 'hello'
},
components: {
cpn: {
template: '#cpn',
},
}
})
</script>
具名slot
<div id="app">
<cpn><button slot="center">中</button></cpn>
</div>
<template id="cpn">
<div>
<slot name="left"> <span>左</span></slot>
<slot name="center"><span>中</span></slot>
<slot name="right"><span>右</span></slot>
</div>
</template>
<script src="../js/vue.js">
</script>
<script>
const app = new Vue({
el: '#app',
data: {
message: 'hello'
},
components: {
cpn: {
template: '#cpn',
},
}
})
</script>