如何从 vue 3 中的 slot 获取 ref？

Question

我需要将名称为 test1 的 ref 集中起来，设置一些值，该值放置在组件槽中（从外部）。有可能以某种方式做到这一点吗？我尝试从 $refs 或 $slots 获取，但失败了。

应用程序.vue

    <template>
      <div id="app">
        <HelloWorld>
          <input type="text" ref="test1" />
        </HelloWorld>
      </div>
    </template>
    
    ```
    <script>
    import HelloWorld from './components/HelloWorld.vue';
    
    export default {
      name: 'App',
      components: {
        HelloWorld,
      },
    };
    </script>
    
    <style>
    #app {
      font-family: Avenir, Helvetica, Arial, sans-serif;
      -webkit-font-smoothing: antialiased;
      -moz-osx-font-smoothing: grayscale;
      text-align: center;
      color: #2c3e50;
      margin-top: 60px;
    }
    </style>

组件.vue

    <template>
      <slot></slot>
      <hr />
      <input type="text" ref="test2" />
    </template>
    
    <script>
    export default {
      name: 'HelloWorld',
      mounted() {
        this.$refs.test2.value = 'test 2 value';
        // how get ref 'test1' ?
      },
    };
    </script>

Answer 1

您可以简单地通过事件或道具传递引用。这是使用您的示例的解决方案。

   <!-- App.vue -->
   <div id="app">
    <HelloWorld :test="inputEl">
      <template v-slot:input>
        <input type="text" ref="test1" />
      </template>
    </HelloWorld>
   </div>

    <script>
        export default {
          name: 'App',
          mounted() {
            this.inputEl = this.$refs.test1;
          },
          data() {
            return {
              inputEl: {}
            }
          }
        };
    </script>
   
   <!-- HelloWorld.vue -->
   <template>
     <slot></slot>
     <hr />
     <input type="text" ref="test2" />
   </template>
   
   <script>
    export default {
      name: 'HelloWorld',
      mounted() {
        this.$refs.test2.value = 'test 2 value';
        
        // Use the prop. Or watch it until it has been updated.
        this.props.test.value = "test 1 value";
      },
    };
   </script>

Answer 2

在 Vue3 中，您可以使用函数引用和作用域槽。

<一href="https://sfc.vuejs.org/#eNqtUs1OwzAMfhUrHLZJrBUcSzeBeAOQOOXSde7WkSZRko5D1XfHbtqOnhASN/9+/vzZnXixNrm2KDKR+9LVNoDH0Nq91HVjjQvQgcMKeqic aWBFpas59a5M+GgxpqRIUg4wmhRSS10a7QmOYm+EsGOc9WYOY+DqmFmj2sBuD53UMDUk10IR9g5QPUndS52nkSBRIydgY1URkDyAfGQyOOROSbgrz7U67qToeCAP66WIVTLIkB/aEI yGjKhR0UQjlrI3FcfyAezWnMZu5kMuB5akBjkiq0VK3Iso4LYpbHLxRpP6w+pyTHgpsi gGxwZBMzLOIVifpamvSlb54hPjTilZiWt1qBtM0DfbgzNfHh0B8xMANTY9jZxu87dL//s Vp06jX1VdfnLbrYlTRmGizGm9AKCBv3wA78FyWYfeQ/XwCMGAsaihgCNeUZHtKGaUj8eJDTmPAV00SPeP9xWQ0Vrb+BK3BaVIY8f4M88l86eScZP5VX4sMagQx82/snyF/ht/+DNb" rel="nofollow noreferrer">示例

// Parent
const slotRef = ref()
const setSlotRef = (el) => {
  slotRef.value = el;
}

<template>
  <slot name="child" :set-ref="setSlotRef">
</template>

// Child
<template #child="{ setRef }">
   <button :ref="(el) => setRef(el)">
     button
   </button>
</template>

Answer 3

我有！

<template>
  <div id="app">
    <HelloWorld name="child" :b="setRefOnA">
      <input type="text" ref="a" value="default value of this input" />
    </HelloWorld>
  </div>
</template>

<script>
import HelloWorld from './components/HelloWorld.vue';

export default {
  name: 'App',
  components: {
    HelloWorld,
  },
  methods: {
    setRefOnA(el) {
      return this.$refs.a;
    },
  },
};
</script>

<style>
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
</style>


<!-- HelloWorld.vue -->
<template>
  <div>
    <slot> ... </slot>
  </div>
</template>

<script>
export default {
  name: 'HelloWorld',
  props: ['b'],
  mounted() {
    console.log(this.b().focus());
  },
};
</script>

链接：https://stackblitz.com/edit/vue-jynies?文件=src/App.vue

Answer 4

您在 App.vue 中定义了 ，因此您需要执行 this.$refs.test1.focus() 也在 App.vue 中。您可以使用 vue:mounted 监听并使用父组件的 Mounted 事件。

App.js

<template>
  <div id="app">
    <HelloWorld @vue:mounted="wrapperMounted">
      <input type="text" ref="test1" />
    </HelloWorld>
  </div>
</template>


<script>
import HelloWorld from './components/HelloWorld.vue';

export default {
  name: 'App',
  components: {
    HelloWorld,
  },
  methods: {
    wrapperMounted() {
      this.$nextTick(() => this.$refs.test1.focus());
    },
  },
};
</script>

<style>
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
</style>

Component.vue

<template>
  <slot></slot>
  <hr />
  <input type="text" ref="test2" />
</template>

<script>
export default {
  name: 'HelloWorld',
  mounted() {
    this.$refs.test2.value = 'test 2 value';
    // how get ref 'test1' ?
  },
};
</script>