uni-app defineProps，defineModel 使用方法

在 Uni-app 中，defineProps 和 defineModel 是用于组件间通信的重要工具。defineProps 用于定义子组件接收来自父组件的属性（props），而 defineModel 则用于在组件中定义和使用 Vuex 的 store 状态。以下是如何在 Uni-app 中使用这两个功能的代码示例。

使用 defineProps

首先，我们定义一个父组件 ParentComponent.vue，它向子组件传递一个名为 message 的 prop：

<template>
  <view>
    <ChildComponent :message="parentMessage" />
  </view>
</template>

<script setup>
import { ref } from 'vue';
import ChildComponent from './ChildComponent.vue';

const parentMessage = ref('Hello from Parent');
</script>

接下来，在子组件 ChildComponent.vue 中使用 defineProps 来接收这个 prop：

<template>
  <view>
    <text>{{ message }}</text>
  </view>
</template>

<script setup>
import { defineProps } from 'uni-app';

const props = defineProps({
  message: String
});
</script>

使用 defineModel

defineModel 通常与 Vuex 一起使用，以便在组件中方便地访问和修改 store 状态。首先，确保你的项目已经配置了 Vuex。然后，你可以在组件中使用 defineModel 来定义和使用 store 中的状态。

假设我们有一个 Vuex store，其中包含一个名为 count 的状态：

// store/index.js
import { createStore } from 'vuex';

export default createStore({
  state() {
    return {
      count: 0
    };
  },
  mutations: {
    increment(state) {
      state.count++;
    }
  }
});

在组件中，我们可以使用 defineModel 来访问和修改这个状态：

<template>
  <view>
    <text>{{ count }}</text>
    <button @click="increment">Increment</button>
  </view>
</template>

<script setup>
import { defineModel } from 'uni-app';

const storeState = defineModel({
  count: () => store.state.count,
  increment: () => store.commit('increment')
});

const { count, increment } = storeState;
</script>

<script>
import { mapState, mapMutations } from 'vuex';
import store from '@/store'; // 确保路径正确

export default {
  store
};
</script>

注意：在实际使用中，defineModel 的具体实现可能依赖于 Uni-app 和 Vuex 的集成方式，上述代码结合了 Vue 3 的 Composition API 和 Vuex 的常规用法，但 defineModel 在 Uni-app 中的具体实现可能略有不同。请参考 Uni-app 官方文档和 Vuex 文档以获取最新和最准确的信息。