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

打包后,父组件隐式传递prop,子组件无法正常获取 #4897

Closed
ShaneLee-9 opened this issue Nov 3, 2021 · 10 comments
Closed
Labels
🐞 bug Something isn't working scope: script-setup

Comments

@ShaneLee-9
Copy link

Version

5.0.0-beta.6

Reproduction link

github.com

Environment info

  System:
    OS: Windows 10 10.0.19042
    CPU: (4) x64 Intel(R) Core(TM) i5-4460  CPU @ 3.20GHz
  Binaries:
    Node: 16.13.0 - C:\Program Files\nodejs\node.EXE
    Yarn: 1.22.17 - ~\AppData\Roaming\npm\yarn.CMD
    npm: 8.1.2 - C:\Program Files\nodejs\npm.CMD
  Browsers:
    Chrome: 95.0.4638.69
    Edge: Spartan (44.19041.423.0), Chromium (95.0.1020.40)
  npmPackages:
    @vue/babel-helper-vue-jsx-merge-props:  1.2.1
    @vue/babel-helper-vue-transform-on:  1.0.2
    @vue/babel-plugin-jsx:  1.1.1
    @vue/babel-plugin-transform-vue-jsx:  1.2.1
    @vue/babel-preset-app:  5.0.0-beta.6
    @vue/babel-preset-jsx:  1.2.4
    @vue/babel-sugar-composition-api-inject-h:  1.2.1
    @vue/babel-sugar-composition-api-render-instance:  1.2.4
    @vue/babel-sugar-functional-vue:  1.2.2
    @vue/babel-sugar-inject-h:  1.2.2
    @vue/babel-sugar-v-model:  1.2.3
    @vue/babel-sugar-v-on:  1.2.3
    @vue/cli-overlay:  5.0.0-beta.6
    @vue/cli-plugin-babel: ~5.0.0-beta.6 => 5.0.0-beta.6
    @vue/cli-plugin-eslint: ~5.0.0-beta.6 => 5.0.0-beta.6
    @vue/cli-plugin-router: ~5.0.0-beta.6 => 5.0.0-beta.6
    @vue/cli-plugin-typescript: ~5.0.0-beta.6 => 5.0.0-beta.6
    @vue/cli-plugin-vuex: ~5.0.0-beta.6 => 5.0.0-beta.6
    @vue/cli-service: ~5.0.0-beta.6 => 5.0.0-beta.6
    @vue/cli-shared-utils:  5.0.0-beta.6
    @vue/compiler-core:  3.2.21
    @vue/compiler-dom:  3.2.21
    @vue/compiler-sfc: ^3.2.21 => 3.2.21
    @vue/compiler-ssr:  3.2.21
    @vue/component-compiler-utils:  3.2.2
    @vue/devtools-api:  6.0.0-beta.19
    @vue/eslint-config-standard: ^6.1.0 => 6.1.0
    @vue/eslint-config-typescript: ^7.0.0 => 7.0.0
    @vue/reactivity:  3.2.21
    @vue/ref-transform:  3.2.21
    @vue/runtime-core:  3.2.21
    @vue/runtime-dom:  3.2.21
    @vue/server-renderer:  3.2.21
    @vue/shared:  3.2.21
    @vue/web-component-wrapper:  1.3.0
    eslint-plugin-vue: ^7.2.0 => 7.20.0
    typescript: ~4.1.5 => 4.1.6
    vue: ^3.2.21 => 3.2.21
    vue-cli-plugin-quasar: ^4.0.3 => 4.0.3
    vue-demi:  undefined (0.12.0)
    vue-eslint-parser:  7.11.0
    vue-hot-reload-api:  2.3.4
    vue-loader:  16.8.1 (15.9.8)
    vue-router: ^4.0.3 => 4.0.12
    vue-style-loader:  4.1.3
    vue-template-es2015-compiler:  1.9.1
  npmGlobalPackages:
    @vue/cli: Not Found

Steps to reproduce

  1. npm install
  2. npm run build
  3. 用一个本地服务器打开dist文件夹下的index.html

What is expected?

页面渲染的文本应该是msg: msg true

What is actually happening?

msg: msg false


当我的子组件接收一个类型为Boolean的msg props的时候,我在父组件传入msg,正常情况下,子组件获取到msg的值应该是true。这在开发环境下是正确的。当我打包后msg的值是一个空字符串。
在提出这个问题之前,我尝试使用vue-cli创建了一个没有集成typescript的项目,它的表现是正常的。

@ShaneLee-9
Copy link
Author

刚刚测试,如果使用以下写法,打包后也是正常的:

<script lang="ts">
import { defineComponent } from 'vue'

export default defineComponent({
  props: {
    msg: {
      type: Boolean,
      required: true
    }
  }
})
</script>

<template>
  <h4>msg: {{ msg ? 'msg true' : 'msg false' }}</h4>
</template>

综合各种情况,目前发现只有用 script setip 语法糖配合 typescript 会出现问题

@bodograumann
Copy link

I'm seeing the same issue.
Same context (I think): <script setup lang="ts"> and boolean prop set to true. Correctly works in dev mode, but not in production build.
It worked with vue-cli@5.0.0-beta.3 and fails in vue-cli@5.0.0-beta.6.

@sodatea
Copy link
Member

sodatea commented Nov 3, 2021

I can reproduce this issue with Vite too. So I'm transferring it to the vue-next repository.

@sodatea sodatea transferred this issue from vuejs/vue-cli Nov 3, 2021
@sodatea sodatea added 🐞 bug Something isn't working scope: script-setup labels Nov 3, 2021
@posva
Copy link
Member

posva commented Nov 3, 2021

It seems to work fine in the SFC playground

@sodatea
Copy link
Member

sodatea commented Nov 3, 2021

The issue here is that in production mode, defineProps<{ msg: boolean }> is compiled to props: { msg: null }

@sodatea
Copy link
Member

sodatea commented Nov 3, 2021

Oh the fix has just been merged:
#4790

@sodatea sodatea closed this as completed Nov 3, 2021
@bodograumann
Copy link

Will there be a new release soon, or do I have to downgrade? (and to which version?)

@ShaneLee-9
Copy link
Author

很快会有新版本发布,还是必须降级?(以及哪个版本?)

Currently it is possible to explicitly pass a boolean value to prop. e.g:

<Children
  :selectable="true"
/>

@bodograumann
Copy link

Not sure I want to incurr this debt. For posterity, this is how one could find the problematic props:

rg --multiline --glob "*.vue" "<[A-Z][^ \n>]*(\s+[a-z-:@]+=\"[^\"]*\")*\s+[a-z-]+\s*[ \n>]"

@languanghao
Copy link

很快会有新版本发布,还是必须降级?(以及哪个版本?)

Currently it is possible to explicitly pass a boolean value to prop. e.g:

<Children
  :selectable="true"
/>

3.2.19可以

@github-actions github-actions bot locked and limited conversation to collaborators Oct 8, 2023
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Labels
🐞 bug Something isn't working scope: script-setup
Projects
None yet
Development

No branches or pull requests

5 participants