vue3 无法赋值因为他是只读属性

在 Vue 3 中，组件的 props 默认是只读的，不能直接在组件内部修改。如果要修改 props 的值，需要在组件内部定义一个 data 属性，并在 created 钩子函数中将 props 的值赋给 data 属性。然后可以在组件内部修改 data 属性的值，但是不要直接修改 props 的值，以避免引起意料之外的问题。

以下是一个示例代码：

<template>
  <div>{{ message }}</div>
</template>

<script>
export default {
  props: {
    initMessage: String
  },
  data() {
    return {
      message: this.initMessage
    }
  },
  created() {
    this.message = this.initMessage
  }
}
</script>

在上面的代码中，我们定义了一个 props 属性 `initMessage`，并在组件内部定义了一个 `message` data 属性，并在 `created` 钩子函数中将 `initMessage` 的值赋给 `message` 属性。这样就可以在组件内部修改 `message` 属性的值，而不影响到 `initMessage` 属性。

相关问题

vue3 ts 封装组件无法为“selectMaterialBool”赋值，因为它是只读属性

在 Vue 3 中，如果你尝试使用 TypeScript 来封装组件，并遇到了 `selectMaterialBool` 作为只读属性的问题，这通常意味着你在组件的 `data` 或 `props` 定义里将其标记为了 `readonly`。`readonly` 属性在初始化后是不允许直接修改的，它常用于表示那些不应该被外部直接更改的状态。

例如，在 `data` 对象中：

export default defineComponent({
  data() {
    return {
      // selectMaterialBool 可能像这样声明为 readonly
      selectMaterialBool: { value: false, writable: false },
    };
  },
});

或者在接收 prop 的时候：

props: {
  selectMaterialBool: {
    type: Boolean,
    default: false,
    readonly: true, // 表示这个 prop 不应被组件内部修改
  }
}

当你试图给它赋值时，会提示错误，因为 TypeScript 知道这是一个只读属性。解决这个问题，你可以考虑：

1. 如果这是组件内部状态，可以创建一个新的可变变量去管理它，然后通过计算属性返回只读版本。
2. 如果这是从父组件传递过来的 prop，那么在组件内部就无需改变它的值，直接使用即可，除非有特殊的需求允许父组件更新该值。

vue3中不能给赋值对象给只读属性的data如何解决

解决这个问题的方法是，在定义 data 对象时，不要使用只读属性来定义它的属性。如果必须使用只读属性来定义某个属性，可以考虑将该属性定义为计算属性或者使用 ref() 来定义该属性。

下面是两种解决方法的示例：

1. 将只读属性定义为计算属性

export default {
  data() {
    return {
      obj: {
        name: 'Tom',
        readonlyProp: 'readonly'
      }
    }
  },
  computed: {
    computedProp() {
      return this.obj.readonlyProp
    }
  },
  methods: {
    updateProp() {
      // this.obj.readonlyProp = 'new value'  // 报错
      this.obj = { ...this.obj, readonlyProp: 'new value' }  // 可以使用对象展开运算符
    }
  }
}

2. 使用 ref() 定义只读属性

import { ref } from 'vue'
export default {
  setup() {
    const obj = {
      name: 'Tom',
      readonlyProp: ref('readonly')
    }
    const updateProp = () => {
      obj.readonlyProp.value = 'new value'
    }
    return {
      obj,
      updateProp
    }
  }
}

在这个示例中，我们使用了 Vue 3 提供的 ref() 函数来定义只读属性。在模板中使用该属性时，需要通过 .value 属性来访问其实际的值。在修改只读属性时，需要通过 .value 属性来修改。