美文网首页Vue
Vue 中怎样获取具名 slot 的 DOM 节点

Vue 中怎样获取具名 slot 的 DOM 节点

作者: _执着执着再执着 | 来源:发表于2021-05-07 11:10 被阅读0次

Vue 2.6版本以后

ParentComponent:
<div>
  <Child>
      <template v-slot:content>
          <div>插入到子组件的内容<div>
      </template>
  <Child/>
</div>

ChildComponent:
<div ref='content'>
    <slot name='content'></slot>
</div>

子组件dom节点 通过this.$refs.content.children[0] 获取

Vue 2.6版本以前:

ParentComponent:
<div>
  <Child>
      <div slot='content'>插入到子组件的内容<div>
  <Child/>
</div>

ChildComponent:
<div>
    <slot name='content'></slot>
</div>

子组件dom节点 通过this.$slots.content[0].elm

注意:通过ref直接拿slot的节点 永远为undefined

相关文章

网友评论

    本文标题:Vue 中怎样获取具名 slot 的 DOM 节点

    本文链接:https://www.haomeiwen.com/subject/fqesdltx.html