使用vue
开发时,组件插槽slot是我们经常使用的特性之一,有时我们插槽中的自定义内容需要使用组件中的数据,这时就需要使用到作用域插槽。
其中,根据vue的版本不同,选择也有所不同
一、vue 2.6.0
之前
在 <template>
上使用特殊的 slot-scope
attribute
二、vue 2.6.0
及之后
<tempalte v-slot:<slotName>="<slotPropsName>"
></template>
// components my-test.vue
<template>
<slot name="table" v-bind="{height}"></slot>
</template>
<script>
export default {
name: 'myText',
data(){
return {
height:0,
}
},
}
</script>
// page test.vue
<my-test>
<template v-slot:default="row">
{{row.height}}
</template>
</my-text>
<script>
export default {
name: 'test',
}
</script>
带有
slot-scope
attribute 的作用域插槽(自 2.6.0 起被废弃
)作用域插槽
网友评论