vue 父组件动态传递ref给子组件应该怎么写？

  • Z时代
  • 2024-03-15
  • 分类：IT

父组件动态传递ref给子组件应该怎么写？
父组件调用

 <component ref="ccc" :options="scrollOptions"></component>

子组件

       <div class="listScrollBox" ref="变量" @click="clickComponent">
            <slot></slot>
            <slot></slot>
        </div>

这里我想把父组件传递的ccc动态给子组件，然后操作子组件？

回答：

父组件：

<template>
  <child-component></child-component>
</template>
<script setup>
import { ref, provide } from 'vue';
import ChildComponent from './ChildComponent.vue';
const ccc = ref(null);
provide('ccc', ccc);
</script>

子组件：

<template>
  <div class="listScrollBox" :ref="ccc" @click="clickComponent">
    <slot></slot>
    <slot></slot>
  </div>
</template>
<script setup>
import { inject } from 'vue';
const ccc = inject('ccc');
const clickComponent = () => {
  // 操作 ccc ref
};
</script>

以上是 vue 父组件动态传递ref给子组件应该怎么写？ 的全部内容， 来源链接： utcz.com/p/934792.html

回到顶部