uniapp怎么监听prop的对象

在uniapp中监听prop的对象可以通过使用`watch`来实现。在组件中定义一个`watch`对象，然后在该对象中设置要监听的属性，当属性发生变化时，会自动触发相应的回调函数。

例如，如果要监听一个名为`person`的对象，可以在组件中这样定义`watch`对象：

export default {
  props: {
    person: {
      type: Object,
      default: () => ({})
    }
  },
  watch: {
    person: {
      handler(val) {
        console.log('person对象发生了变化：', val);
      },
      deep: true,
    }
  }
}

在上面的代码中，我们定义了一个`watch`对象，用于监听`person`对象。当`person`对象发生变化时，会触发`handler`回调函数，并且将新的`person`对象作为参数传递给回调函数。我们还设置了`deep`为`true`，表示要对对象进行深度监听，这样当`person`对象中的子属性发生变化时，也会触发回调函数。

需要注意的是，`watch`对象只能监听props中的属性，如果想监听组件内部的数据，需要使用`$watch`方法。

相关问题

uniapp 中监听全局属性的方式都有几种

在uni-app中，可以通过以下几种方式来监听全局属性的变化：

1. 使用`$watch`：与在Vue.js中使用`$watch`监听数据变化的方式类似，在uni-app中也可以使用`$watch`来监听全局属性的变化。需要注意的是，在uni-app中，全局属性是挂载在`uni`对象上的，所以需要使用`uni.$globalData`来访问全局属性。例如：

   export default {
     created() {
       this.$watch(() => uni.$globalData.prop, (newValue, oldValue) => {
         console.log('globalData.prop has changed');
       });
     }
   }

2. 使用`uni.$on`：`uni`对象也提供了类似于Vue.js中的事件总线的功能，可以使用`uni.$on`来监听全局事件。可以在全局属性变化的时候触发相应的全局事件，在需要监听的组件中使用`uni.$on`来监听该事件。例如：

   export default {
     created() {
       uni.$on('globalData.propChanged', () => {
         console.log('globalData.prop has changed');
       });
     },
     destroyed() {
       uni.$off('globalData.propChanged');
     }
   }

需要注意的是，在组件销毁的时候需要使用`uni.$off`来移除监听器，以避免内存泄漏。

3. 使用`uni.$watch`：uni-app还提供了`uni.$watch`方法来监听数据变化，与在Vue.js中使用`$watch`监听数据变化的方式类似。需要注意的是，在uni-app中，全局属性是挂载在`uni`对象上的，所以需要使用`uni.$globalData`来访问全局属性。例如：

   export default {
     created() {
       uni.$watch(() => uni.$globalData.prop, (newValue, oldValue) => {
         console.log('globalData.prop has changed');
       });
     }
   }

综上所述，uni-app中可以使用多种方式来监听全局属性的变化，可以根据具体的情况选择合适的方式来监听全局属性的变化。

uniapp defineProps

`uni-app defineProps` 是 `uni-app` 中用于在组件之间传递数据的一种方式。它允许开发者将一组属性作为参数从父组件传入到子组件，这样可以使得子组件能够访问并利用这些信息来定制其外观、功能等。

### 使用场景

当你希望在组件间共享数据并且这种数据不会频繁改变时，`defineProps` 非常有用。例如，在构建应用的某个部分时，需要基于一些静态设置渲染界面元素，如颜色方案、标题文本或其他配置信息。

### 示例

假设你有一个名为 `ThemeComponent.vue` 的组件，它需要接收主题背景色作为属性：

<template>
  <div :style="{ backgroundColor: color }">
    <!-- 组件内容 -->
  </div>
</template>

<script>
export default {
  name: 'ThemeComponent',
  props: {
    // 定义了一个名为 'color' 的属性，并指定其类型为 String
    color: {
      type: String,
      required: true
    }
  }
}
</script>

在这个例子中，`color` 属性用于设置 div 元素的背景颜色。父组件可以通过如下方式向这个子组件传递值：

<template>
  <ThemeComponent :color="themeColor" />
</template>

<script>
import ThemeComponent from './ThemeComponent.vue';

export default {
  components: {
    ThemeComponent
  },
  data() {
    return {
      themeColor: '#ff0000'
    };
  }
};
</script>

### `uni-app defineProps` 的关键点

1. **属性声明**：通过 `props` 对象显式声明组件接受的属性名称及其类型。
2. **类型检查**：`type` 属性用于定义传入的属性值类型，这有助于提高组件的稳定性和错误检测能力。
3. **属性验证**：如果属性类型不符合预期，Vue 将抛出警告或错误；如果指定了 `required: true`，则缺少该属性时会引发警告。

### 相关问题:

1. `uni-app` 的 `defineProps` 是否支持默认值设定？
- 是的，可以使用默认值来处理某些属性未提供的情况，比如:

     export default {
       name: 'MyComponent',
       props: {
         customText: {
           type: String,
           default: 'Default Text'
         }
       }
     };

2. 能否在 Vue.js 组件中同时使用 `data()` 和 `props` 来管理状态吗？
- 可以，但是应谨慎使用。通常建议优先使用 `props` 来传递外部数据，而使用 `data()` 方法来初始化和管理组件内部的状态。

3. 当从组件外部动态修改传给组件的 props 时，如何确保组件重新渲染？
- 如果修改了组件的 prop，通常浏览器会在下次用户交互时自动重新渲染组件。为了手动触发渲染，可以在组件内部监听 prop 的变化并通过更新自身的状态来触发重新渲染，或者使用 Vuex 等状态管理库来统一管理组件间的通信和状态刷新。