这篇文章主要介绍了Vue具名插槽与作用域插槽怎么使用的相关知识,内容详细易懂,操作简单快捷,具有一定借鉴价值,相信大家阅读完这篇Vue具名插槽与作用域插槽怎么使用文章都会有所收获,下面我们一起来看看吧。
成都创新互联公司专注于额敏网站建设服务及定制,我们拥有丰富的企业做网站经验。 热诚为您提供额敏营销型网站建设,额敏网站制作、额敏网页设计、额敏网站官网定制、小程序制作服务,打造额敏网络公司原创品牌,更为您提供额敏网站排名全网营销落地服务。
1、插槽就是子组件中的提供给父组件使用的一个占位符,在子组件中用< slot>< /slot > 表示,父组件可以在这个占位符中填充任何模板代码,如 HTML、组件等,填充的内容会替换子组件的< slot>< /slot >标签。(简单来说就是在子组件中挖个坑让别人来跳)
2、在 2.6.0 版本之后,slot 以及 slot-scope 由 v-slot 统一替代。
3、插槽包括默认插槽、具名插槽和作用域插槽
1、通过vue-cli创建好初始化项目 2、src下创建category.vue,同时在App.vue中引入
在子组件中配置好props,接收从父组件App传来的信息以及准备两个slot插槽:
//category.vue <template> <div id="bck"> <h4>{{ title }}</h4> //准备两个带有不同name的插槽(可以让使用者在指定的地方显示数据) <slot name="center">默认插槽1</slot> <slot name="footer">默认插槽2</slot> </div> </template> <script> export default { name: "category", data() { return {}; }, props: ["title", "listData"], }; </script> <style scoped> #bck { background-color: skyblue; width: 200px; height: 300px; } h4 { text-align: center; background-color: #bfa; } </style>
通过在子组件category定义的不同的name,可以让数据在指定的位置显示:
//App.vue <template> <div id="app"> <category title="美食"> <img slot="center" src="https://tse2-mm.cn.bing.net/th/id/OIP-C.wwyQPKyRH0ge8-Ppd9DSJgHaEK?w=317&h=180&c=7&r=0&o=5&dpr=1.25&pid=1.7" alt="" /> <a slot="footer" href="https://img1.qunarzz.com/travel">更多</a> </category> <category title="游戏"> <ul slot="center"> <li v-for="(g, index) in game" :key="index">{{ g }}</li> </ul> <div id="game" slot="footer"> <a href="https://img1.qunarzz.com/travel">单机游戏</a> <a href="https://img1.qunarzz.com/travel">网络游戏</a> </div> </category> <category title="电影"> <video slot="center" width="" height="" controls src="https://v.qq.com/x/cover/mzc00200dwnknik.html" ></video> <div id="game" slot="footer"> <a href="https://img1.qunarzz.com/travel">更多信息1</a> <a href="https://img1.qunarzz.com/travel">更多信息2</a> </div> </category> </div> </template> <script> import category from "./components/category"; export default { name: "app", data() { return { foods: ["麻辣烫", "烧烤", "小青龙", "炸酱面"], game: ["魔兽世界", "FIFA2016", "NBA2K", "洛克王国"], }; }, mounted() {}, methods: {}, components: { category, }, }; </script> <style scoped> #app, #game { display: flex; justify-content: space-around; } img { width: 100%; } video { width: 100%; } </style>
1、在定义好slot插槽后,在需要展示的标签中加上 slot=“name”,即可在指定的位置上显示需要显示的内容
2、同时需要注意的是,此方法的插槽数据源game是在App父组件中提供的,而不在子组件自身提供。为了减少冗余,可通过作用域插槽将数据存储在定义slot插槽的组件自身
要求将要展示的数据放在定义插槽的组价中
父组件App.vue仅仅只是根据数据生成结构,而数据是在定义slot的组件中提供的
在子组件中配置的props仅需要接收标题头。准备两个作用域插槽并携带要展示的数据:
//category.vue <template> <div id="bck"> <h4>{{ title }}</h4> <slot :G="games" :F="foods">作用域插槽</slot> </div> </template> <script> export default { name: "category", data() { return { foods: ["麻辣烫", "烧烤", "小青龙", "炸酱面"], games: ["魔兽世界", "FIFA2016", "NBA2K", "洛克王国"], }; }, props: ["title"], }; </script> <style scoped> #bck { background-color: skyblue; width: 200px; height: 300px; } h4 { text-align: center; background-color: #bfa; } </style>
//App.vue <category title="游戏"> <template scope="zwt"> <!--ES6解构赋值,{}直接拿到zwt.G的值 --> <ul> <li v-for="(g, index) in zwt.G" :key="index">{{ g }}</li> </ul></template > </category> <category title="美食"> <template scope="{F}"> <!--ES6解构赋值,{}直接拿到zwt.F的值 --> <ol > <li v-for="(f, index) in F" :key="index">{{f}}</li> </ol> </template> </category>
1、可以解决在使用者组件中没有要展示的数据,要调用别的组件的数据时可以使用。
2、定义slot的组件将自身的数据传给使用者,使用者接收到数据后进行结构的配置。
3、使用者仅决定生成的结构样式,而数据是从被使用者(定义slot的组件)传来的。
4、可以理解为slot就是父组件向子组件的指定位置插入特定的结构。
关于“Vue具名插槽与作用域插槽怎么使用”这篇文章的内容就介绍到这里,感谢各位的阅读!相信大家对“Vue具名插槽与作用域插槽怎么使用”知识都有一定的了解,大家如果还想学习更多知识,欢迎关注创新互联行业资讯频道。
名称栏目:Vue具名插槽与作用域插槽怎么使用
网页路径:https://www.cdcxhl.com/article14/ieshge.html
成都网站建设公司_创新互联,为您提供动态网站、ChatGPT、网站策划、网站制作、网站收录、网站内链
声明:本网站发布的内容(图片、视频和文字)以用户投稿、用户转载内容为主,如果涉及侵权请尽快告知,我们将会在第一时间删除。文章观点不代表本网站立场,如需处理请联系客服。电话:028-86922220;邮箱:631063699@qq.com。内容未经允许不得转载,或转载时需注明来源: 创新互联