uni-app中uvue如何使用defineProps传参UTSJSONObject

发布于 1周前 作者 h691938207 来自 Uni-App

uni-app中uvue如何使用defineProps传参UTSJSONObject

提示： [@vue/compiler-sfc] defineProps() argument must be an object or array literal.

直接defineProps中写{…}是不会报错的 这样引入会提示cellProps的类型不是object，有什么办法能UTSJSONObject转object吗

Harmonyos Next教程
1 回复

在uni-app中使用uView UI框架时，defineProps 是 uView 3.x 版本中引入的一个用于组件接收父组件传递参数的 API。它简化了参数传递的过程，使得组件的使用更加直观和高效。下面是一个具体的代码案例，展示了如何在 uni-app 中使用 defineProps 来传递一个 UTSJSONObject 对象给子组件。

父组件代码 (ParentComponent.vue)

<template>
  <view>
    <child-component :uts-json="utsJsonData"></child-component>
  </view>
</template>

<script>
import ChildComponent from '@/components/ChildComponent.vue';

export default {
  components: {
    ChildComponent
  },
  data() {
    return {
      utsJsonData: {
        name: 'John Doe',
        age: 30,
        city: 'New York'
      }
    };
  }
};
</script>

子组件代码 (ChildComponent.vue)

<template>
  <view>
    <text>Name: {{ utsJson.name }}</text>
    <text>Age: {{ utsJson.age }}</text>
    <text>City: {{ utsJson.city }}</text>
  </view>
</template>

<script>
export default {
  name: 'ChildComponent',
  // 使用 defineProps 接收父组件传递的参数
  setup(props) {
    // 假设 uView 3.x 已经在项目中正确配置
    const utsJson = defineProps({
      utsJson: {
        type: Object,
        default: () => ({})
      }
    }).utsJson;

    return {
      utsJson
    };
  }
};
</script>

<style scoped>
/* 样式代码 */
</style>

说明

  1. 父组件 (ParentComponent.vue) 中，我们定义了一个 utsJsonData 对象，并通过 :uts-json="utsJsonData" 将其传递给子组件 ChildComponent。

  2. 子组件 (ChildComponent.vue) 中，我们使用了 defineProps 方法来接收父组件传递的 utsJson 参数。defineProps 返回一个对象，其中包含了所有通过 defineProps 定义的属性。在这里，我们直接解构并获取了 utsJson 属性。

  3. defineProps 的类型检查是通过对象字面量中的 type 属性来实现的，这里我们指定 utsJson 的类型为 Object，并为其提供了一个默认值 {}，以防父组件没有传递该属性。

  4. 在模板中，我们通过 {{ utsJson.name }}、{{ utsJson.age }} 和 {{ utsJson.city }} 来显示接收到的 UTSJSONObject 对象的内容。

通过这种方式，你可以方便地在 uni-app 的 uView 组件中传递和接收参数，确保组件间的数据流通更加清晰和高效。

回到顶部