vue插槽样式_vue slot 插槽详解

插槽含义：就是引入子组件后，在插入子组件元素中添加信息或者标签，使得子组件的指定位置插入信息或者标签

插槽有三种：默认插槽、具名插槽、作用域插槽，由于vue2.6.0后对插槽进行修改，但是兼容2.6.0前的版本，博文中只说明2.6.0后的插槽，vue3.0后面会去除2.60前的版本兼容

一、默认插槽

默认插槽

{ {message}}

这是一个默认插槽

这是标签h3

//子组件

Vue.component('tode-item', {

template: `

这里面是slot的默认值//当引入组件的地方没有写插槽内容，将显示子组件插槽中默认的值，如果没有默认值也没用写插槽内容，则插槽内容为空。

`

});var app = newVue({

el:"#app",

data: {

message:'hello world!'}

});

二、具名插槽: 子组件中有多个插槽，通过给插槽指定名称方式实现一 一对应。

具名插槽

这是2.60版本后使用v-slot引入插槽名称

nihao

hi

nihao

hi

template: `

这是第一个具名插槽

这是第二个具名插槽

`

})

let app= newVue({

el:"#app",

data: {

}

})

三、作用域插槽：把子组件data中的数据或者子组件props中的数据传到父组件的插槽中使用

1) 两个属性合并成了一个  v-slot : 插槽名称 = ' 传过来的值 ' 。

2) 组件页面中slot的内容没有变化 。

3) v-slot 不能用在 html 标签上 。

4) 如果是默认插槽 可以写成  v-slot='xxx'。

5) 还增加了  可以解构插槽props 和 设置默认值的内容，具体的可以查看官网 解构插槽

作用域插槽

{ {val.send.text}}

这是2.60版本前的写法：{ {thing.said}}

template: `

`,

props:['message'],

data(){return{

list:[

{"id":10,"text":"苹果"},{"id":20,"text":"香蕉"},{"id":30,"text":"梨"},{"id":40,"text":"芒果"},

]

}

}

})

let app= newVue({

el:"#app",

data: {

msg:'这是动态传入的slot的内容',

}

})

4. 新增的还有 动态插槽名

什么是动态插槽名？大致就是动态指令参数也可以用在v-slot上，这个就要涉及到2.6.0新增的  动态参数

xxx

这个 attrContent  会被作为一个 JavaScript 表达式进行动态求值，求得的值将会作为最终的参数来使用。 比如这里attrContent 最终的值为 default  则渲染出来的结果 就是 v-slot:default='msg' 。

注意：

1) 单独在 [ ] 方括号中也可以使用表达式，但是不能存在引号和空格

2) 当然 这个动态的值  可以通过 方法，计算属性，或者 data数据 里面的内容。重要的是这个动态的值 是 引用组件的 作用域。简单点说就是父级组件的作用域。

例如，上面 v-slot:sayWhat='thing'  可以写成：

1) v-slot:[first+sec]='thing'    注意 加号两边不能留空格

2) v-slot:[attr]='thing'

3) v-slot:[attrs]='thing'

4) v-slot:[getattr()]='thing'

export default{

data () {return{

msg:'这是动态传入的slot的内容',

attr:'sayWhat',

first:'say',

sec:'What',

}

},

components:{ slotScope },

computed:{

attrs:function(){return 'sayWhat'}

},

methods:{

getattr(){return 'sayWhat'}

}

}

参考：https://www.cnblogs.com/zjjDaily/p/10518546.html