Vue

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

2021-05-07  本文已影响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

上一篇 下一篇

猜你喜欢

热点阅读