黑马模板网专注企业网站模板制作，包括企业pbootcms网站模板，静态网页模板，网站源码下载，HTML网站模板等等。
免责声明：本站所有资源(模板、图片)搜集整理于互联网或者网友提供，仅供学习与交流使用，如果不小心侵犯到你的权益，请及时联系我们删除该资源。
插槽1 默认插槽
main.js
//引入Vue
import Vue from "vue";
//引入vue-resource
//引入App
import App from './App';
//关闭Vue的生产提示
Vue.config.productionTip = false;
new Vue({
el: '#app',
render: h => h(App),
beforeCreate() {
Vue.prototype.$bus = this;
}
});
App.vue
<template>
<div class="container">
<Category title="美食">
<img src="" alt="delicious food"/>
</Category>
<Category title="游戏" :listData="games">
<ul>
<li v-for="(g , index) in games" :key="index">{{ g }}</li>
</ul>
</Category>
<Category title="电影">
<video src="http://clips.vorwaerts-gmbh.de/big_buck_bunny.mp4" controls></video>
</Category>
</div>
</template>
<script>
import Category from "@/components/Category";
export default {
name: "App",
components:{
Category
},
data(){
return {
foods:['火锅','烧烤','小龙虾','牛排'],
games:['红色警戒','穿越火线','劲舞团','超级玛丽'],
films:['《教父》','《拆弹专家》','《你好，李焕英》','《尚硅谷》']
}
}
}
</script>
<style lang="css" scoped>
.container{
display: flex;
justify-content: space-around;
}
video {
width: 100%;
}
img{
width: 100%;
}
</style>
Category.vue
<template>
<div class="category">
<h3>{{ title }}</h3>
<!--插槽,等着组件的使用者进行填充-->
<slot>我是默认值</slot>
</div>
</template>
<script>
export default {
name: "Category",
props:[ 'listData', 'title' ]
}
</script>
<style scoped>
.category{
background: skyblue;
width: 200px;
height: 300px;
}
h3{
text-align: center;
background: orange;
}
img{
width: 100%;
}
</style>
插槽2 具名插槽
main.js
//引入Vue
import Vue from "vue";
//引入vue-resource
//引入App
import App from './App';
//关闭Vue的生产提示
Vue.config.productionTip = false;
new Vue({
el: '#app',
render: h => h(App),
beforeCreate() {
Vue.prototype.$bus = this;
}
});
App.vue
<template>
<div class="container">
<Category title="美食">
<img slot="center" src="" alt="delicious food"/>
<a href="https://www.baidu.com" slot="footer">百度</a>
</Category>
<Category title="游戏" :listData="games">
<ul slot="center">
<li v-for="(g , index) in games" :key="index">{{ g }}</li>
</ul>
<div slot="footer" class="foot">
<a href="https://www.baidu.com">单机游戏</a>
<a href="https://www.baidu.com">网络游戏</a>
</div>
</Category>
<Category title="电影">
<video slot="center" src="http://clips.vorwaerts-gmbh.de/big_buck_bunny.mp4" controls></video>
<!--但是注意v-slot仅仅只能被用在组件上或者template标签上-->
<template v-slot:footer>
<div class="foot">
<a href="https://www.baidu.com">经典</a>
<a href="https://www.baidu.com">热门</a>
<a href="https://www.baidu.com">推荐</a>
</div>
<h4>欢迎来到影院观赏</h4>
</template>
</Category>
</div>
</template>
<script>
import Category from "@/components/Category";
export default {
name: "App",
components:{
Category
},
data(){
return {
foods:['火锅','烧烤','小龙虾','牛排'],
games:['红色警戒','穿越火线','劲舞团','超级玛丽'],
films:['《教父》','《拆弹专家》','《你好，李焕英》','《尚硅谷》']
}
}
}
</script>
<style lang="css" scoped>
.container, .foot{
display: flex;
justify-content: space-around;
}
h4{
text-align: center;
}
</style>
Category.vue
<template>
<div class="category">
<h3>{{ title }}</h3>
<!--插槽,等着组件的使用者进行填充-->
<slot name="center">我是默认值</slot>
<slot name="footer">我是默认值</slot>
</div>
</template>
<script>
export default {
name: "Category",
props:[ 'listData', 'title' ]
}
</script>
<style scoped>
.category{
background: skyblue;
width: 200px;
height: 300px;
}
h3{
text-align: center;
background: orange;
}
img{
width: 100%;
}
video{
width: 100%;
}
</style>
插槽3 作用域插槽
main.js
//引入Vue
import Vue from "vue";
//引入vue-resource
//引入App
import App from './App';
//关闭Vue的生产提示
Vue.config.productionTip = false;
new Vue({
el: '#app',
render: h => h(App),
beforeCreate() {
Vue.prototype.$bus = this;
}
});
App.vue
<template>
<div class="container">
<Category title="游戏">
<template scope="{games}">
<!--这里data为插槽给你传递的对象包含你所需要的数据 包装成对象的原因就是你当时可能个插槽传递了多个数据-->
<ul>
<li v-for="(g , index) in games" :key="index">{{ g }}</li>
</ul>
</template>
</Category>
<Category title="游戏">
<template scope="{games}">
<!--这里data为插槽给你传递的对象包含你所需要的数据-->
<ol>
<li v-for="(g , index) in games" :key="index">{{ g }}</li>
</ol>
</template>
</Category>
<Category title="游戏">
<template slot-scope="{games}">
<h4 v-for="(g , index) in games" :key="index">{{ g }}</h4>
</template>
</Category>
</div>
</template>
<script>
import Category from "@/components/Category";
export default {
name: "App",
components:{
Category
},
}
</script>
<style lang="css" scoped>
.container, .foot{
display: flex;
justify-content: space-around;
}
</style>
Category.vue
<template>
<div class="category">
<h3>{{ title }}</h3>
<!--插槽,等着组件的使用者进行填充-->
<slot :games="games">
我是默认值
</slot>
</div>
</template>
<script>
export default {
name: "Category",
props:[ 'listData', 'title' ],
data(){
return {
games:['红色警戒','穿越火线','劲舞团','超级玛丽'],
}
}
}
</script>
<style scoped>
.category{
background: skyblue;
width: 200px;
height: 300px;
}
h3{
text-align: center;
background: orange;
}
</style>
