Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Setup sugar cannot pass the ref object to the ref function param.But I can get the ref object correctly with no sugar #3561

Closed
recovery-alt opened this issue Apr 8, 2021 · 3 comments

Comments

@recovery-alt
Copy link

recovery-alt commented Apr 8, 2021

Version

3.0.11

Reproduction link

link

Steps to reproduce

  1. Use Setup sugar in the children component.and set the ref equals dom to the root element.
  2. Const a ref variable named dom.
  3. Use ref function in the parent component, and then you cannot get the ref obejct in the ref function's first param.

What is expected?

using Setup sugar in the children component and set the ref attr to the root element won't cause ref function's first param missing in the parent component.

What is actually happening?

Sugar.vue is the children component of the App.vue. When I use ref sugar in the Sugar.vue, I cannot get the ref object in the setRef's first param. It's an empty object. But with no sugar in the NoSugar.vue, I can get the ref object correctly in the setRef's first param.
App.vue

<template>
  <sugar :ref="setRef" />
  <no-sugar :ref="setRef" />
</template>
<script lang="ts">
export default {
  setup() {
    const setRef = el => {
      // el is an empty object
    };
    
    const setRefNoSugar = el => {
      // el is correct
    };
    return { setRef, setRefNoSugar };
  }
};
</script>

it works

<script lang="ts">
import { ref, onMounted } from 'vue';
export default {
  setup() {
    const dom = ref();
    return { dom };
  },
};
</script>

it does not work

<script lang="ts" setup>
import { ref } from 'vue';
const dom = ref();
</script>

Here is my repo.

@HcySunYang
Copy link
Member

Currently this is expected, <script setup> is closed by default, see https://github.com/vuejs/rfcs/blob/script-setup-2/active-rfcs/0000-script-setup.md#closed-by-default. But the RFC about the expose is still under discussion vuejs/rfcs#210. I tried to give a workaround, but the result was much messier than I thought.

@recovery-alt
Copy link
Author

I've already known what the exact problem is. Thanks.

@yyx990803
Copy link
Member

Closing as expected behavior.

@github-actions github-actions bot locked and limited conversation to collaborators Oct 22, 2023
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Labels
None yet
Projects
None yet
Development

No branches or pull requests

3 participants