vue.js - 如何在作用域插槽中获取 refs 元素
问题描述
如果插槽的模板中有一些引用,我如何从组件中访问这些引用?例如:
v-component.vue
<template>
<div>
<slot></slot>
</div>
</template>
<script>
export default {
created() {
console.log(this.$refs.ele)
}
}
</script>
应用程序.vue
<template>
<v-component>
<template slot-scope="props">
<h1 ref="ele"></h1>
</template>
</v-component>
</template>
<script>
import VComponent from './v-component
export default {
components: { VComponent }
}
</script>
v-compoent.vue 输出中的 this.$refs.ele 未定义。我的问题是我怎样才能得到这个元素?
解决方案
slot
named和scopedSlot
has中的每个元素context.$refs
。不要忘记先检查对象是否存在。
<template>
<v-component>
<template slot-scope="props">
<h1 ref="ele">{{ props }}</h1>
</template>
</v-component>
</template>
<script>
import VComponent from './v-component'
export default {
components: { VComponent }
}
</script>
和
<template>
<div>
<slot demo="foo"></slot>
</div>
</template>
<script>
export default {
created() {
this.$nextTick(function() { // lazy
console.warn(this.$scopedSlots.default()[0].context.$refs)
});
}
}
</script>
结果:
推荐阅读
- typescript - Lodash isEqualWith 如何自定义不检查对象的类型?
- python - 如何在 Django 框架中正确显示图像到 html 模板?
- uwp - 由于关键字长度,UWP 应用提交失败
- c# - 比较两个列表:一个包含对象,另一个包含字符串
- tsql - 试图理解这个 t-sql if 语句
- python - Python 子字符串搜索未按预期工作
- android - 有没有一种特殊的方法可以通过 arduino 通过 BLE 发送数据
- javascript - Puppeteer 中的滚动问题
- autodesk-forge - 如何通过 Autodesk-Data-Management-API 在 BIM360 中将先前的项目版本恢复为“当前”
- apache-spark - 为初学者安装 pyspark