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

script setup: ref imported from a .vue file doesn't seem to update when used in anothr component's template #2699

Closed
CHOYSEN opened this issue Dec 1, 2020 · 3 comments
Labels
🐞 bug Something isn't working

Comments

@CHOYSEN
Copy link
Contributor

CHOYSEN commented Dec 1, 2020

Version

3.0.3

Reproduction link

https://github.com/CHOYSEN/can_i_import_ref_from_.vue_file

Steps to reproduce

yarn
yarn dev

open browser and click the button

What is expected?

"otherComponentRef" and "otherComponentReactive" both change or not

What is actually happening?

"otherComponentReactive" work fine
"otherComponentRef" work in <script>, broken in <script setup>

@LinusBorg LinusBorg changed the title Can i import a ref from another .vue file? script setup: ref imported from a .vue file doesn't seem to update when used in anothr component's template Dec 1, 2020
@LinusBorg LinusBorg added the 🐞 bug Something isn't working label Dec 1, 2020
@CHOYSEN
Copy link
Contributor Author

CHOYSEN commented Dec 1, 2020

I am not sure if i can import a ref object from another ".vue" file...

Use <script setup>, the template will compile to

import { toDisplayString as _toDisplayString, createVNode as _createVNode, Fragment as _Fragment, openBlock as _openBlock, createBlock as _createBlock } from "/@modules/vue.js"

export function render(_ctx, _cache, $props, $setup, $data, $options) {
  return (_openBlock(), _createBlock(_Fragment, null, [
    _createVNode("div", null, _toDisplayString($setup.localRef), 1 /* TEXT */),
    _createVNode("div", null, _toDisplayString($setup.localReactive.data), 1 /* TEXT */),
    _createVNode("div", null, _toDisplayString($setup.otherComponentRef)),
    _createVNode("div", null, _toDisplayString($setup.otherComponentReactive.data), 1 /* TEXT */),
    _createVNode("button", { onClick: $setup.changeValue }, "change")
  ], 64 /* STABLE_FRAGMENT */))
}
// bindings
bindings: {
  ref: 'setup-const',
  reactive: 'setup-const',
  otherComponentRef: 'setup-const',
  otherComponentReactive: 'setup-const',
  localRef: 'setup-ref',
  localReactive: 'setup-const',
  changeValue: 'setup-const',
  logValue: 'setup-const'
}

The otherComponentRef is considered to setup-const, when i use <script> instend, it will be considered to setup-maybe-ref

@CHOYSEN
Copy link
Contributor Author

CHOYSEN commented Dec 1, 2020

The original issue: vitejs/vite#1160

@CHOYSEN
Copy link
Contributor Author

CHOYSEN commented Dec 1, 2020

Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Labels
🐞 bug Something isn't working
Projects
None yet
Development

No branches or pull requests

2 participants