vue获取子节点自定义属性

你可以通过 `$refs` 属性获取子组件的 DOM 节点，并使用 `getAttribute()` 方法获取自定义属性。例如：

<template>
  <div>
    <child-component ref="child"></child-component>
  </div>
</template>

<script>
import ChildComponent from './ChildComponent.vue';

export default {
  components: {
    ChildComponent
  },
  mounted() {
    const childNode = this.$refs.child.$el;
    const customAttr = childNode.getAttribute('custom-attr');
    console.log(customAttr);
  }
}
</script>

在上面的例子中，`ChildComponent` 组件的 DOM 节点可以通过 `this.$refs.child.$el` 获取，然后使用 `getAttribute()` 方法获取自定义属性 `custom-attr` 的值。

相关问题

vue3+ jsx通过slots.default()获取到子节点，如何给子节点default插槽添加自定义内容

在Vue3中使用JSX时，可以通过`v-slots`指令来给默认插槽添加自定义内容。具体实现步骤如下：

1. 在父组件中，使用`<slot>`元素来声明默认插槽，并在其中添加需要传递给子组件的内容：

// Parent.vue
<template>
  <Child>
    {{
      default: () => (
        <div>
          <h1>自定义内容</h1>
          <slot />
        </div>
      )
    }}
  </Child>
</template>

2. 在子组件中，使用`$slots`属性来获取父组件传递的插槽内容，并在需要的地方使用`v-slots`指令来显示插槽内容和自定义内容：

// Child.vue
<template>
  <div>
    <h1>子组件</h1>
    <div v-slots="{
      default: () => $slots.default()
    }"></div>
  </div>
</template>

这样就可以在子组件的默认插槽中添加自定义内容了。注意，`v-slots`指令中的对象属性名需要与父组件中的插槽名称保持一致。