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