uni-app 组件之间如何传值

码上实战 • 2024年4月3日下午2:10 • 技术漫谈 • 阅读 320

• uniapp 组件传值

• 父传子
• 子传父

uniapp 组件传值

父传子

在uniapp中，组件传值主要通过props进行。以下是一个简单的例子：

首先，创建一个组件MyComponent.vue：

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

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

然后，在父组件中使用这个组件并传值：

<template>
  <view>
    <my-component :message="parentMessage"></my-component>
  </view>
</template>

<script>
import MyComponent from './MyComponent.vue'

export default {
  components: {
    MyComponent
  },
  data() {
    return {
      parentMessage: 'Hello from parent'
    }
  }
}
</script>

在这个例子中，MyComponent组件通过props接收了一个名为message的值，而这个值来自于父组件中的parentMessage数据属性。

在父组件的模板中，使用:message=”parentMessage”来动态传递值给子组件的props。

更多详细内容，请微信搜索“前端爱好者“， 戳我查看 。

子传父

在 UniApp 开发中，子组件向父组件传递数据通常通过事件的方式实现。具体步骤如下：

1. 在子组件中触发事件并携带需要传递的数据：

// 子组件.vue
<template>
  <button @click="emitData">点击传递数据</button>
</template>

<script>
export default {
  methods: {
    emitData() {
      this.$emit('passData', '这是子组件传递的数据');
    }
  }
}
</script>

2. 父组件接收并处理子组件传递过来的数据：

// 父组件.vue
<template>
  <child-component @passData="handleData"></child-component>
</template>

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

export default {
  components: {
    ChildComponent
  },
  methods: {
    handleData(data) {
      console.log('接收到子组件传递的数据：', data);
      // 这里可以根据需要对data进行进一步的操作
    }
  }
}
</script>

在这个例子中，当子组件中的按钮被点击时，会触发 emitData 方法，该方法会执行 $emit('passData', '这是子组件传递的数据')，将数据传递给父组件。父组件通过在子组件标签上监听 @passData 事件，并定义对应的处理函数 handleData 来接收并处理这些数据。