打包后,父组件隐式传递prop,子组件无法正常获取
Version
5.0.0-beta.6
Reproduction link
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
- npm install
- npm run build
- 用一个本地服务器打开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的项目,它的表现是正常的。
刚刚测试,如果使用以下写法,打包后也是正常的:
<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
会出现问题
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.
It seems to work fine in the SFC playground
The issue here is that in production mode, defineProps<{ msg: boolean }>
is compiled to props: { msg: null }
Oh the fix has just been merged: https://github.com/vuejs/vue-next/pull/4790
很快会有新版本发布,还是必须降级?(以及哪个版本?)
Currently it is possible to explicitly pass a boolean value to prop. e.g:
<Children
:selectable="true"
/>
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>]"