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

使用vite2+vue3.0构建的项目中,子组件更新父组件的值,在使用npm run build 打包后报错 #3645

Closed
nowo opened this issue Jun 2, 2021 · 6 comments · May be fixed by StemmlerSisters/vite#2
Labels
bug: upstream Bug in a dependency of Vite

Comments

@nowo
Copy link

nowo commented Jun 2, 2021

使用vite2+vue3.0构建的项目中,子组件更新父组件的值(父子组件数据动态双向绑定) 在使用npm run build 打包后报错

这里写了个测试

1、app.vue传值“Hello Vue 3 + Vite"到HelloWorld.vue页面

2、HelloWorld.vue通过input框更新传过来的值

在这里插入图片描述

文件代码

app.vue文件下(父组件)

<template>
  <img alt="Vue logo" src="./assets/logo.png" />
  <div style="padding: 15px; background: #ddd">
    <p class="red">app.vue父组件</p>
    <h1>{{ msg }}</h1>
  </div>
  <HelloWorld v-model:msg="msg" />
</template>

<script setup>
import { ref } from "vue";
import HelloWorld from "./components/HelloWorld.vue";

const msg = ref("Hello Vue 3 + Vite");

// This starter template is using Vue 3 experimental <script setup> SFCs
// Check out https://github.com/vuejs/rfcs/blob/script-setup-2/active-rfcs/0000-script-setup.md
</script>

HelloWorld.vue文件下(子组件)

<template>
  <div style="padding: 15px; background: #41b883">
    <p class="red">HelloWorld.vue子组件</p>
    <h1>{{ msg }}</h1>
    <input v-model="msg" />
  </div>
  ...
</template>
<script setup>
import {
  defineProps,
  reactive,
  getCurrentInstance,
  defineEmit,
  watchEffect,
  watch,
  onUpdated,
} from "vue";

const props = defineProps({
  // msg: String,
  msg: {
    type: String,
    default: "",
  },
});

const { ctx } = getCurrentInstance();
const emit = defineEmit(["update:msg"]);

// 方法一
watchEffect(() => {
  console.log(props.msg);
  // ctx.$emit("update:msg", props.msg);
  emit("update:msg", props.msg);
});

</script>

页面效果

在开发模式下是能够正常的
在这里插入图片描述

在开发模式下能够正常使用,但是到打包上线后,浏览器控制台就报错,数据也没有相应的更新

在这里插入图片描述

这个是package.json安装使用的版本
在这里插入图片描述

所以现在我不知道是问题在哪里

代码已上传到GitHub https://github.com/mrjimin/testvite

打包后的文件预览地址 https://mrjimin.github.io/testvite/

@sodatea
Copy link
Member

sodatea commented Jun 3, 2021

@HcySunYang 看起来像是 @vue/compiler-sfc 的问题

@HcySunYang
Copy link
Contributor

确实是 compiler-core 的问题,原因是在分析 v-model 绑定的表达式类型的时候,没有想到它会是 props,但问题是为啥 v-model 一个 props?这是错误的用法呀。

@nowo
Copy link
Author

nowo commented Jun 3, 2021

vue2.0中是使用:msg.sync="msg"来进行数据双向绑定的,vue3.0数据双向绑定这块移除.sync修饰符,用v-model来替代了,
vue3.0更新变化说明https://v3.cn.vuejs.org/guide/migration/v-model.html#%E6%A6%82%E8%A7%88

@sodatea sodatea added bug: upstream Bug in a dependency of Vite plugin: vue and removed pending triage labels Jun 3, 2021
@sodatea
Copy link
Member

sodatea commented Jun 3, 2021

那是在父组件用的,子组件只需要负责发送事件就行了。
v-model 会改变绑定参数的值,如果把它用在 props 上会破坏单向数据流,一直都是不建议的。

@HcySunYang
Copy link
Contributor

提了个 PR,和 vite 没啥关系,似乎可以关闭这个 issue 了?

@sodatea sodatea closed this as completed Jun 3, 2021
@github-actions
Copy link

This issue has been locked since it has been closed for more than 14 days.

If you have found a concrete bug or regression related to it, please open a new bug report with a reproduction against the latest Vite version. If you have any other comments you should join the chat at Vite Land or create a new discussion.

@github-actions github-actions bot locked and limited conversation to collaborators Jul 16, 2021
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Labels
bug: upstream Bug in a dependency of Vite
Projects
None yet
3 participants