如何更新vue组件中的props

我想在 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”，因为它是常量或只读属性

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

看看prop.sync修饰符。它正是针对这种情况而设计的，您想要更新父级值但将其作为属性传递给子级：
https://v2.vuejs.org/v2/guide/components-custom-events.html#sync-Modifier https://v2.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 https://codesandbox.io/s/97rl86n64