slot-scope="scope"里的数据怎么通过js来取
时间: 2023-09-09 16:09:51 浏览: 40
可以通过以下方式来获取slot-scope中的数据:
1. 使用JavaScript访问组件中的$slots对象,获取到对应的slot元素。
2. 遍历slot元素的子节点,找到具有slot-scope属性的元素。
3. 使用getAttribute()方法来获取该元素的slot-scope属性的值。
4. 将获取到的值作为参数传入到vm.$scopedSlots对象中,获取到该slot-scope中的数据。
例如,假设我们有一个组件中有一个具有slot-scope属性的元素:
```
<template>
<div>
<slot name="example" slot-scope="scope">
<p>{{ scope.data }}</p>
</slot>
</div>
</template>
```
我们可以使用以下代码来获取到slot-scope中的数据:
```
const slot = this.$slots.example;
let slotScope = null;
for (let i = 0; i < slot.length; i++) {
const el = slot[i];
if (el.tag && el.data && el.data.attrs && el.data.attrs['slot-scope']) {
slotScope = el.data.attrs['slot-scope'];
break;
}
}
const scopedSlots = this.$scopedSlots[slotScope]({});
const data = scopedSlots[0].data.attrs['data'];
console.log(data);
```
在这个例子中,我们首先获取了组件中的example slot元素,然后遍历其子节点,找到具有slot-scope属性的元素,获取到其属性值slotScope。
接着,我们使用vm.$scopedSlots对象来获取到该slot-scope中的数据,将其传入到函数中,并获取到数据中的data属性。
最后,我们将data输出到控制台中。