避免在 Nuxt VueJs 中直接改变道具

Posted 2023-02-22

【中文标题】避免在 Nuxt VueJs 中直接改变道具

【英文标题】：Avoid Mutating Props Directly in a Nuxt VueJs

【发布时间】：2021-06-18 04:14:37

【问题描述】：

所以我看到很多关于这个问题的帖子，但我无法理解为什么我在这里做错了。我有一个放在组件中的表单。它主要由使用 vuetify 的 TextField 组成。然后我在其他地方重用这个表格。我尝试了不同的方法，但仍然出现错误，这是我的组件。

  <v-window continuous  v-model="step">
                  <v-window-item :value="1">
                      <v-form>
                        <v-container>
                          <v-row>
                            <v-col
                              cols="12"
                              md="4"
                            >
                              <v-text-field
                                label="First name"
                                required
                                autocomplete="off"
                                clearable

                                v-model="modalFirstNameValue"

                              ></v-text-field>
                            </v-col>

                            <v-col
                              cols="12"
                              md="4"
                            >
                              <v-text-field
                                label="Last name"
                                required
                                autocomplete="off"
                                clearable

                                v-model="modalLastNameValue"

                              ></v-text-field>
                            </v-col>

                            <v-col
                              cols="12"
                              md="4"
                            >
                              <v-text-field
                                label="E-mail"
                                required
                                autocomplete="off"
                                clearable
                                v-model="modalEmailValue"
                              ></v-text-field>
                            </v-col>
                        </v-container>
                      </v-form>
                  </v-window-item>
<script>
export default 
  props: 
    modalFirstNameValue: 
    ,
    modalLastNameValue:

    ,
    modalEmailValue:

    ,
</script>

导入组件

<template>
      <div id="app">
        <FormModal
          v-show="isModalVisible"
          @close="closeModal"
          modalTitle="Book Appointment Form"
          v-bind:modalFirstNameValue="modalFirstNameValue"
          v-bind:modalFirstNameLabel="modalFirstNameLabel"
          v-bind:modalLastNameValue="modalLastNameValue"
          v-bind:modalLastNameLabel="modalLastNameLabel"
          v-bind:modalEmailValue="modalEmailValue"
          v-bind:modalEmailLabel="modalEmailLabel"
          />
      </div>
</template>

<script>
import FormModal from "~/components/FormModal";
export default 
  name: 'app',
  components: 
    FormModal,
  ,

  data()
    return
      modalEmailLabel         : 'Email',
      modalEmailValue         : '',
      modalLastNameLabel      : 'Last Name',
      modalLastNameValue      : '',
      modalFirstNameLabel     : 'First Name',
    
  

</script>

当我尝试在其中一个文本字段中写入时，我收到了避免改变道具的错误，我不确定我是否理解导致这种情况的原因。我想没有这个错误并在这里做最佳实践。有什么建议吗？

【问题讨论】：

props 用作初始值（如查询参数）。从父级到子级只有单向数据绑定，这就是您收到警告的原因（在子级中修改）。如果你想改变一些数据，请改用data()。

@bigless 谢谢，你能给我举个例子吗？

只需将其加入一个没有道具的组件中。

【参考方案1】：

问题

将 prop 传递给组件时：它将作为 READ ONLY prop 传递。

每当父组件更改此属性时，子组件也会更改。

但是，当您尝试从子组件更改此道具时，您会收到此错误。

当使用v-model这意味着你可以（读写）这个属性。

解决方案

要解决这个问题，你可以查看 vue.js 文档中的Customizing Component v-model

v-model基本上是@input事件和:value的组合

所以想法是将你的属性包装到一个对象中并使用v-model传递它

并且在子组件中，您可以添加一个自定义的v-model 事件，该事件将在其中一个属性的每次更改中触发

查看this working demo: