Subscribe on changes!

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

avatar
Nov 3rd 2021

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的项目,它的表现是正常的。

avatar
Nov 3rd 2021

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

<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 会出现问题

avatar
Nov 3rd 2021

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.

avatar
Nov 3rd 2021

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

avatar
Nov 3rd 2021

It seems to work fine in the SFC playground

avatar
Nov 3rd 2021

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

avatar
Nov 3rd 2021

Oh the fix has just been merged: https://github.com/vuejs/vue-next/pull/4790

avatar
Nov 4th 2021

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

avatar
Nov 5th 2021

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

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

<Children
  :selectable="true"
/>
avatar
Nov 5th 2021

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>]"
avatar
Nov 8th 2021

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

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

<Children
  :selectable="true"
/>

3.2.19可以