vue prop自定义一个对象

可以通过以下方式在 Vue 的 props 中自定义一个对象：

props: {
  myObj: {
    type: Object,
    default: function() {
      return {
        prop1: 'default value 1',
        prop2: 'default value 2'
      }
    }
  }
}

在上面的代码中，我们声明了一个名为 `myObj` 的 props，类型为 Object。我们还定义了一个默认值，该默认值是一个包含两个属性的对象。在组件中使用时，我们可以通过以下方式访问 `myObj` 对象的属性：

<template>
  <div>
    <p>{{ myObj.prop1 }}</p>
    <p>{{ myObj.prop2 }}</p>
  </div>
</template>

当然，也可以通过父组件中的数据来传递 `myObj` 对象的值：

<template>
  <my-component :my-obj="parentObj"></my-component>
</template>

其中 `parentObj` 是父组件中的一个对象，可以包含任意数量的属性和值。在子组件中，我们可以像上面那样使用 `myObj` 对象的属性访问父组件传递过来的值。

相关问题

vue3自定义属性是什么

在 Vue 3 中，自定义属性是通过 `v-bind` 指令和 `setup` 函数来实现的。具体来说，自定义属性可以分为以下两种情况：

1. 通过 `v-bind` 绑定一个自定义属性

可以通过 `v-bind` 指令将一个自定义属性绑定到一个组件上。例如：

<template>
  <div v-bind:custom-prop="propValue">Hello World</div>
</template>

<script>
export default {
  props: ['propValue'],
  setup(props) {
    const customProp = Vue.ref(props.customProp)
    return {
      customProp
    }
  }
}
</script>

在上面的例子中，我们使用 `v-bind` 将 `custom-prop` 属性绑定到了组件的根节点上。在 `setup` 函数中，我们使用 `Vue.ref` 函数将 `props.customProp` 的值包装成了一个响应式对象，并将其暴露出去。

2. 在 `setup` 函数中直接定义一个自定义属性

如果不需要将自定义属性绑定到模板中，也可以直接在 `setup` 函数中定义一个自定义属性。例如：

<template>
  <div>Hello World</div>
</template>

<script>
export default {
  setup() {
    const customProp = Vue.ref('custom value')
    return {
      customProp
    }
  }
}
</script>

在上面的例子中，我们在 `setup` 函数中定义了一个名为 `customProp` 的自定义属性，并将其暴露出去。在模板中可以通过 `{{ customProp }}` 来访问该属性的值。

需要注意的是，在 Vue 3 中，自定义属性必须被定义在 `setup` 函数中，否则组件无法访问到该属性。

Vue 获取自定义属性的值

在 Vue 中获取自定义属性的值可以通过 `$attrs` 对象来获取。`$attrs` 对象是一个包含了所有父作用域中不作为 prop 被识别 (且获取) 的特性绑定 (class 和 style 绑定除外) 的对象。

例如，如果你有如下的一个组件：

<template>
  <div class="custom-component" v-bind="$attrs">
    <!-- ... -->
  </div>
</template>

<script>
export default {
  // ...
}
</script>

你可以在组件内部访问 `$attrs` 对象，以获取自定义属性的值。

console.log(this.$attrs.customAttribute)

其中，`customAttribute` 是自定义属性的名称。