uniapp父子传值

在uniapp中，父组件向子组件传递数据可以通过props属性实现。父组件可以将数据通过props属性传递给子组件，子组件可以通过props属性接收父组件传递的数据。

以下是一个示例：

父组件index.vue：

<template>
  <view>
    <test :num="parCount"></test>
  </view>
</template>

<script>
export default {
  data() {
    return {
      parCount: 10
    }
  }
}
</script>

子组件test.vue：

<template>
  <view>
    子组件获取到父组件的属性:{{ num }}
  </view>
</template>

<script>
export default {
  props: {
    num: {
      type: Number,
      default: 0
    }
  }
}
</script>

在上面的示例中，父组件index.vue通过`:num="parCount"`将parCount属性的值传递给子组件test.vue的num属性。子组件test.vue通过props属性接收父组件传递的数据，并在模板中使用。

相关问题

uniapp props传值

### UniApp 使用 Props 进行父子组件传值

在 Uni-app 中，`props` 是一种单向下行的数据绑定机制，允许父组件向子组件传递数据。这种通信方式简单直观，适用于大多数场景下的父子组件交互。

#### 父组件向子组件传递数据

当父组件需要向子组件传递静态或动态属性时，可以利用 `props` 实现这一功能。具体来说，在定义子组件时声明接受哪些外部输入作为其配置项；而在实例化该子组件的地方，则按照 HTML 属性的形式指定这些值即可[^1]。

<!-- ParentComponent.vue -->
<template>
  <view class="parent">
    <!-- 将 parentMessage 绑定到 child 的 prop 上 -->
    <ChildComponent :message="parentMessage"></ChildComponent>
  </view>
</template>

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

export default {
  components: { ChildComponent },
  data() {
    return {
      parentMessage: 'Hello, I am the father component!'
    }
  }
}
</script>

<!-- ChildComponent.vue -->
<template>
  <view class="child">
    {{ message }}
  </view>
</template>

<script>
// 声明接收来自父级的消息
export default {
  props: ['message']
};
</script>

上述代码展示了如何创建两个 Vue 单文件组件——ParentComponent 和 ChildComponent，并通过 `props` 让前者能够把消息发送给后者显示出来[^2]。

#### 子组件更新父组件状态

虽然 `props` 主要用于从上至下流动的信息流，但在某些情况下也需要让子组件影响父组件的状态变化。这时通常会结合 `$emit()` 方法来触发自定义事件通知上级作出相应调整[^5]。

例如：

<!-- ChildComponent.vue -->
<template>
  <view class="child">
    <button @click="sendMessageToFather">Click me to change father's value!</button>
  </view>
</template>

<script>
export default {
  methods: {
    sendMessageToFather() {
      this.$emit('updateValue', 'New Value From Son');
    }
  }
}
</script>

<!-- ParentComponent.vue -->
<template>
  <view class="parent">
    <p>Father says: {{ fatherValue }}</p>
    
    <!-- 接收并处理子组件发出的 updateValue 事件 -->
    <ChildComponent @updateValue="(newValue) => fatherValue = newValue"></ChildComponent>
  </view>
</template>

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

export default {
  components: { ChildComponent },
  data() {
    return {
      fatherValue: ''
    };
  }
}
</script>

这段示例说明了怎样设置监听器捕获特定命名空间内的任何更改请求，从而同步反映在整个应用程序的不同部分之中[^3]。

uniapp父子组件传值

在 Uniapp 中，可以使用 props 属性实现父子组件之间的数据传递。具体操作如下：

1. 在父组件中定义要传递给子组件的数据，例如：

<template>
  <div>
    <child :msg="message"></child>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        message: 'Hello, child component!'
      }
    }
  }
</script>

2. 在子组件中使用 props 属性接收父组件传递过来的数据，例如：

<template>
  <div>{{ msg }}</div>
</template>

<script>
  export default {
    props: {
      msg: String
    }
  }
</script>

这样，父组件中的 message 数据就可以通过 props 属性传递给子组件，并在子组件中使用。需要注意的是，props 中定义的属性名必须与父组件中传递的属性名一致。