如何更新 vue 组件中的 props答案

【问题标题】：How to update props in vue component如何更新 vue 组件中的 props
【发布时间】：2023-03-18 13:36:01
【问题描述】：

我想在 Vue 中创建自己的复选框。我想使用 fontawesome 中的两个图标（锁定和解锁）。当我的复选框被选中时，图标应该被锁定，否则解锁。

这是我的代码：

<template>
   <div>
      <i @click="statusChanged()" v-if="!checked" class="fas fa-lock-open lock"></i>
      <i @click="statusChanged()" v-if="checked" class="fas fa-lock lock"></i>
   </div>
</template>
<script lang="ts">
import Vue from 'vue';
import { Prop } from 'vue/types/options';
export default Vue.extend({
    props: {
        checked: {
        type: Boolean as Prop<boolean>,
    },
},
methods: {
    statusChanged() {
        this.checked = !this.checked;
    },
},
});

我收到一个错误：

不能分配给'checked'，因为它是一个常量或只读属性

你能帮忙解决这个问题吗？

【问题讨论】：

我从来没有在 TypeScript 中使用过 Vue，但这可能相当于 Vue 2 - Mutating props vue-warn
为什么不使用 data 属性而不是道具？
@GeorgeJempty 我不想使用数据，因为选中的这个选项是从组件外部设置的，来自父项
只需指定一个名称不是已选中的数据属性，然后将created 块添加到您将该数据属性设置为等于道具值的组件中——您是否访问过链接在上面的第一条评论中？它建议了这个解决方案。
@GeorgeJempty 我做到了，但这种方法存在一些问题。我没有更改从父组件传递给子组件的值。

标签： typescript vuejs2 vue-component

【解决方案1】：

看看prop.sync 修饰符。它正是为这种情况而设计的，您希望更新父母的值但将其作为属性传递给孩子：
https://vuejs.org/v2/guide/components-custom-events.html#sync-Modifier

基本上你将道具标记为sync'able:
<Checkbox :checked.sync="foo"></Checkbox>

要更新父级，您需要从子级发出 update:prop 事件：
this.$emit('update:checked', !this.checked)

这应该可以帮助您开始解决问题：
https://codesandbox.io/s/97rl86n64

【讨论】：

它只发生在我身上？：'v-bind' 指令上的'.sync' 修饰符已被弃用。请改用“v-model:propName”。
@Doglas 仅适用于 > 3.0，不适用于 2.x
@RickyBoyce v3.vuejs.org/guide/migration/v-model.html#overview

【解决方案2】：

^{答案最初由 OP @Marek 编辑成问题，由 the community 复制到此处。}

我能够解决问题。解决方案与@TommyF suggested 非常相似。

解决办法如下：

<template>
<div>
    <i v-if="!checked" class="fas fa-lock-open lock" @click="statusChanged()"></i>
    <i v-if="checked" class="fas fa-lock lock" @click="statusChanged()"></i>
</div>
</template>
<script lang="ts">
import Vue from 'vue';
import { Prop } from 'vue/types/options';
export default Vue.extend({
    props: {
        checked: {
            type: Boolean as Prop<boolean>,
        },
    },
    model: {
        prop: 'checked',
        event: 'click',
    },
    methods: {
        statusChanged() {
            this.$emit('click', !this.checked);
        },
    },
});
</script>

【讨论】：