<div id="app">
<Hello>
<p> 这里是Hello的内容 </p>
</Hello>
</div>
<template id="hello">
<div>
<h3> 这里是hello组件 </h3>
<slot></slot>
</div>
</template>
/*
slot 插槽
类比: 游戏卡的游戏机
作用: 开辟一个空间,给未来的元素使用
名词解释:
未来元素: 组件的内容
思考: 组件的内容、会被模板覆盖,但是我想要将这个内容保留下来怎么办?
*/
Vue.component('Hello',{
template: '#hello'
})
new Vue({
}).$mount('#app') // 手动挂载
-
2.5 slot slot-scope
<body> <div id="app"> <Hello> <header slot = "header"> 头部 </header> <footer> 底部 </footer> </Hello> </div> <template id="hello"> <div> <slot name = "header"></slot> <h3> 这里是hello组件 </h3> <slot></slot> </div> </template> </body> <script src="../../../lib/vue.js"></script> <script> /* slot 插槽 类比: 游戏卡的游戏机 作用: 开辟一个空间,给未来的元素使用 名词解释: 未来元素: 组件的内容 思考: 组件的内容、会被模板覆盖,但是我想要将这个内容保留下来怎么办? */ Vue.component('Hello',{ template: '#hello' }) new Vue({ }).$mount('#app') // 手动挂载
-
具名插槽
-
slot-scope
-
-
2.6 v-slot
-
v-slot
<div id="app"> <Hello> <template v-slot:default = "data"> <p> {{ data.msg }} </p> </template> </Hello> </div> <template id="hello"> <div> <h3> 这里是hello组件 </h3> <slot :msg = "msg"></slot> </div> </template>
Vue.component('Hello',{ template: '#hello', data () { return { msg: 'hello 1905' } } }) new Vue({ el: '#app' })
-