v-slot插槽

最新推荐文章于 2023-12-14 20:33:53 发布

老街一角

最新推荐文章于 2023-12-14 20:33:53 发布

阅读量2.1k

点赞数 2

分类专栏： vue 文章标签： vue vue.js html es6

本文链接：https://blog.csdn.net/Wen_Tao98/article/details/119611467

版权

本文介绍了Vue中v-slot的使用，它替代了旧版的slot和slot-scope，简化了复杂语法。内容涵盖了v-slot的基本用法、具名插槽以及作用域插槽的应用。

摘要由CSDN通过智能技术生成

v-slot的出现是为了代替原有的slot和slot-scope
简化了一些复杂的语法。
v-slot ：后边是插槽名称，=后边是组件内部绑定作用域值的映射。

v-slot ：后边是插槽名称，=后边是组件内部绑定作用域值的映射。

基本用法

import Vue from 'vue'
// 定义组件componentOne 
const Home = {
     
    template: `
        <div :style="aa">
            <slot></slot> // 定义插槽
        </div>
    `,
    data () {
     
        return {
     
            aa: {
     
                width: '200px',
                height: '200px'
                border: '1px solid #ccc'
            }
        }
    }   
}