uniapp如何实现父子组件传值

在 Uni-app 中，可以通过 props 和事件（event）来实现父子组件之间的数据传递。下面是一个简单的例子，演示了父组件向子组件传递数据的过程：

父组件 Parent.vue：

<template>
  <div>
    <!-- 将 parentMessage 作为属性传递给子组件 -->
    <Child :message="parentMessage" @childEvent="handleChildEvent" />
  </div>
</template>

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

export default {
  components: {
    Child,
  },
  data() {
    return {
      parentMessage: 'Hello from parent!', // 父组件的数据
    };
  },
  methods: {
    handleChildEvent(data) {
      console.log('Received data from child:', data);
    },
  },
};
</script>

子组件 Child.vue：

<template>
  <div>
    <p>{{ message }}</p>
    <button @click="sendDataToParent">Send Data to Parent</button>
  </div>
</template>

<script>
export default {
  props: {
    message: {
      type: String,
      default: '',
    },
  },
  methods: {
    sendDataToParent() {
      const data = 'Data from child!';
      // 使用 $emit 方法触发 childEvent 事件，并传递数据给父组件
      this.$emit('childEvent', data);
    },
  },
};
</script>

在上面的示例中，父组件 Parent.vue 包含一个名为 parentMessage 的数据，它作为属性 message 传递给子组件 Child.vue。在子组件中，使用 props 接收该属性，并在模板中显示。

子组件 Child.vue 中的按钮绑定了一个点击事件 sendDataToParent，当点击按钮时，子组件通过 $emit 方法触发名为 childEvent 的事件，并传递数据给父组件。

在父组件中，通过监听子组件的 childEvent 事件，可以接收子组件传递的数据，并在 handleChildEvent 方法中进行处理。