Vue60 插槽

2024-09-01 14:44
文章标签 插槽 vue60

本文主要是介绍Vue60 插槽，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

插槽

  1. 作用：让父组件可以向子组件指定位置插入html结构，也是一种组件间通信的方式，适用于 父组件 ===> 子组件 。

  2. 分类：默认插槽、具名插槽、作用域插槽

  3. 使用方式：

    1. 默认插槽：

      父组件中：<Category><div>html结构1</div></Category>
子组件中：<template><div><!-- 定义插槽 --><slot>插槽默认内容...</slot></div></template>

    2. 具名插槽：

      父组件中：<Category><template slot="center"><div>html结构1</div></template><template v-slot:footer><div>html结构2</div></template></Category>
子组件中：<template><div><!-- 定义插槽 --><slot name="center">插槽默认内容...</slot><slot name="footer">插槽默认内容...</slot></div></template>

    3. 作用域插槽：

      1. 理解：数据在组件的自身，但根据数据生成的结构需要组件的使用者来决定。（games数据在Category组件中，但使用数据所遍历出来的结构由App组件决定）

      2. 具体编码：

        父组件中：<Category><template scope="scopeData"><!-- 生成的是ul列表 --><ul><li v-for="g in scopeData.games" :key="g">{{g}}</li></ul></template></Category><Category><template slot-scope="scopeData"><!-- 生成的是h4标题 --><h4 v-for="g in scopeData.games" :key="g">{{g}}</h4></template></Category>
子组件中：<template><div><slot :games="games"></slot></div></template><script>export default {name:'Category',props:['title'],//数据在子组件自身data() {return {games:['红色警戒','穿越火线','劲舞团','超级玛丽']}},}</script>

默认插槽

Category.vue

<template><div class="category"><h3>{{title}}分类</h3><!-- 定义一个插槽（挖个坑，等着组件的使用者进行填充） --><slot>我是一些默认值，当使用者没有传递具体结构时，我会出现</slot></div>
</template><script>export default {name:'Category',props:['title']}
</script><style scoped>.category{background-color: skyblue;width: 200px;height: 300px;}h3{text-align: center;background-color: orange;}video{width: 100%;}img{width: 100%;}
</style>

App.vue

<template><div class="container"><Category title="美食" ><img src="https://s3.ax1x.com/2021/01/16/srJlq0.jpg" alt=""></Category><Category title="游戏" ><ul><li v-for="(g,index) in games" :key="index">{{g}}</li></ul></Category><Category title="电影"><video controls src="http://clips.vorwaerts-gmbh.de/big_buck_bunny.mp4"></video></Category></div>
</template><script>import Category from './components/Category'export default {name:'App',components:{Category},data() {return {foods:['火锅','烧烤','小龙虾','牛排'],games:['红色警戒','穿越火线','劲舞团','超级玛丽'],films:['《教父》','《拆弹专家》','《你好，李焕英》','《尚硅谷》']}},}
</script><style scoped>.container{display: flex;justify-content: space-around;}
</style>

main.js

//引入Vue
import Vue from 'vue'
//引入App
import App from './App.vue'
//引入插件
import vueResource from 'vue-resource'
//关闭Vue的生产提示
Vue.config.productionTip = false
//使用插件
Vue.use(vueResource)//创建vm
new Vue({el:'#app',render: h => h(App),beforeCreate() {Vue.prototype.$bus = this}
})

具名插槽

Category.vue

<template><div class="category"><h3>{{title}}分类</h3><!-- 定义一个插槽（挖个坑，等着组件的使用者进行填充） --><slot name="center">我是一些默认值，当使用者没有传递具体结构时，我会出现1</slot><slot name="footer">我是一些默认值，当使用者没有传递具体结构时，我会出现2</slot></div>
</template><script>export default {name:'Category',props:['title']}
</script><style scoped>.category{background-color: skyblue;width: 200px;height: 300px;}h3{text-align: center;background-color: orange;}video{width: 100%;}img{width: 100%;}
</style>

App.vue

<template><div class="container"><Category title="美食" ><img slot="center" src="https://s3.ax1x.com/2021/01/16/srJlq0.jpg" alt=""><a slot="footer" href="http://www.atguigu.com">更多美食</a></Category><Category title="游戏" ><ul slot="center"><li v-for="(g,index) in games" :key="index">{{g}}</li></ul><div class="foot" slot="footer"><a href="http://www.atguigu.com">单机游戏</a><a href="http://www.atguigu.com">网络游戏</a></div></Category><Category title="电影"><video slot="center" controls src="http://clips.vorwaerts-gmbh.de/big_buck_bunny.mp4"></video><template v-slot:footer><div class="foot"><a href="http://www.atguigu.com">经典</a><a href="http://www.atguigu.com">热门</a><a href="http://www.atguigu.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 scoped>.container,.foot{display: flex;justify-content: space-around;}h4{text-align: center;}
</style>

main.js

//引入Vue
import Vue from 'vue'
//引入App
import App from './App.vue'
//引入插件
import vueResource from 'vue-resource'
//关闭Vue的生产提示
Vue.config.productionTip = false
//使用插件
Vue.use(vueResource)//创建vm
new Vue({el:'#app',render: h => h(App),beforeCreate() {Vue.prototype.$bus = this}
})

作用域插槽

Category.vue

<template><div class="category"><h3>{{title}}分类</h3><slot :games="games" msg="hello">我是默认的一些内容</slot></div>
</template><script>export default {name:'Category',props:['title'],data() {return {games:['红色警戒','穿越火线','劲舞团','超级玛丽'],}},}
</script><style scoped>.category{background-color: skyblue;width: 200px;height: 300px;}h3{text-align: center;background-color: orange;}video{width: 100%;}img{width: 100%;}
</style>

App.vue

<template><div class="container"><Category title="游戏"><template scope="atguigu"><ul><li v-for="(g,index) in atguigu.games" :key="index">{{g}}</li></ul></template></Category><Category title="游戏"><template scope="{games}"><ol><li style="color:red" 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 scoped>.container,.foot{display: flex;justify-content: space-around;}h4{text-align: center;}
</style>

main.js

//引入Vue
import Vue from 'vue'
//引入App
import App from './App.vue'
//引入插件
import vueResource from 'vue-resource'
//关闭Vue的生产提示
Vue.config.productionTip = false
//使用插件
Vue.use(vueResource)//创建vm
new Vue({el:'#app',render: h => h(App),beforeCreate() {Vue.prototype.$bus = this}
})

运行

在这里插入图片描述

这篇关于Vue60 插槽的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！


http://www.chinasem.cn/article/1127231。

相关文章

SFC CSS 功能：深层选择/插槽选择器/动态绑定

SFC CSS 功能：深层选择/插槽选择器/动态绑定

深层选择器​ 如果您希望样式中的选择器scoped“深入”，即影响子组件，则可以使用:deep()伪类： <style scoped>.a :deep(.b) {/* ... */}</style> 以上内容将被编译为： .a[data-v-f3f3eg9] .b {/* ... */} 提示 创建的 DOM 内容v-html不受范围样式的影响，但您仍然可以使用深
阅读更多...
Vue的插槽slot使用

Vue的插槽slot使用

Vue的插槽slot使用 这三个title是对应的 这两个title是对应的 同理v-for的这个item 也是对应的 这三个是对应的 自定义的标签
阅读更多...
RouterView 插槽

RouterView 插槽

RotuerView 组件暴露了一个插槽，可以用来渲染路由组件： <router-view v-slot="{ Component }"><component :is="Component" /></router-view> 上面的代码等价于不带插槽的 <router-view />，但是当我们想要获得其他功能时，插槽提供了额外的扩展性。 KeepAlive & Transition​
阅读更多...
vue学习十二( v-model用于自定义组件、父子组件通信、组件绑定原生事件、具名插槽、插槽作用域、动态组件is和keep-alive)

vue学习十二( v-model用于自定义组件、父子组件通信、组件绑定原生事件、具名插槽、插槽作用域、动态组件is和keep-alive)

文章目录 自定义组件的 v-model子组件跟父组件通信将原生事件绑定到组件单个插槽插槽内容具名插槽作用域插槽is 特性实现动态组件动态组件使用 keep-alive 自定义组件的 v-model 一个组件上的 v-model 默认会利用名为 value 的 prop 和名为 input 的事件，但是像单选框、复选框等类型的输入控件可能会将 value 特性用于不同的目的。m
阅读更多...
uni-app插槽

uni-app插槽

什么是插槽? 在 UniApp 中，插槽（Slot）是一种允许父组件向子组件特定位置插入HTML内容的方式。这种方式使得组件更加灵活，可以被复用在多种场景下，同时让父组件能够控制子组件的部分呈现内容。 基本概念 默认插槽：当没有特别指定插槽名称时，默认插槽就是指没有名字的插槽，可以在子组件中直接使用 <slot></slot> 标签来定义一个默认插槽的位置。 命名插槽：如果需要在子组件中
阅读更多...
element-plus 新增一行合计。除了用summary-method还可以用append的插槽

element-plus 新增一行合计。除了用summary-method还可以用append的插槽

:summary-method="getSummaries" <el-table:data="reformtableData"style="width: 100%"show-summary:summary-method="getSummaries"ref="reformtableRef"> <el-table-column label="序号" type="index" width="6
阅读更多...
Vue3学习笔记之插槽

Vue3学习笔记之插槽

目录 前言 一、基础 (一) 默认插槽 (二) 具名插槽 (三) 作用域插槽 (四) 动态插槽 二、实战案例 前言 插槽（Slots）？ 插槽可以实现父组件自定义内容传递给子组件展示，相当于一块画板，画板就是我们的子组件，我们在上面定义好布局和固定内容，然后将需要变化的部分空出来（挖坑），然后别人就可以根据需要在这个坑位上填充内容 插槽功能可以让我们实现组件多
阅读更多...
面试官：vue插槽有什么用？插槽的本质是什么？

面试官：vue插槽有什么用？插槽的本质是什么？

目录 插槽的用途： 插槽的本质： 插槽的使用方式：         在 Vue.js 开发中，插槽 (slot) 是一个强大的工具，它允许我们灵活地控制组件内部的内容呈现方式，并赋予组件更高的可复用性。本文将深入探讨 Vue 插槽的用途和本质，帮助你更好地理解和运用这一重要特性。 插槽的用途： 自定义组件内容： 插槽允许你在组件内部预留一个位置，供外部组件
阅读更多...
avue-crud 自定义搜索项 插槽

avue-crud 自定义搜索项 插槽

加上 -search 就可以自定义查询项了
阅读更多...
Vue 插槽：实现组件内容分发的强大工具

Vue 插槽：实现组件内容分发的强大工具

1. 什么是插槽 插槽是 Vue 组件中的一个概念，它允许我们向组件内部传递内容。这在使用组件时提供了极大的灵活性，因为我们可以根据需要自定义组件的内部结构，而不必改变组件本身。 2. 插槽的类型 2.1 默认插槽 默认插槽是 Vue 组件中最基础的插槽类型。它允许你在组件的标签内部添加任何内容，这些内容将在组件的 <slot> 标签位置被渲染。默认插槽不需要指定名称，因此每个组件只有一个
阅读更多...

Copyright China编程 23002807@qq.com

沪ICP备2023033072号-2