uni-app 组件之间如何传值

耀南.

已于 2024-04-17 10:43:27 修改

阅读量322

点赞数 9

分类专栏：前端技术栈Uniapp必备文章标签： uni-app 前端

于 2024-04-17 10:20:59 首次发布

本文链接：https://blog.csdn.net/YN2000609/article/details/137862146

版权

前端技术栈Uniapp必备专栏收录该内容

23 篇文章 1 订阅

订阅专栏

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 来接收并处理这些数据。

更多干货🎁

如果我的博客对你有帮助、如果你喜欢我的博客内容，请 “👍点赞” “✍️评论” “💙收藏” 一键三连哦！
【👇🏻👇🏻👇🏻关注我| 获取更多源码 | 优质文章】带您学习各种前端插件、3D炫酷效果、图片展示、文字效果、以及整站模板、大学生毕业HTML模板、期末大作业模板、等!
以上内容技术相关问题😈欢迎一起交流学习🔥嘉vx+18634371151

—— 往期推荐 ——