在 uni-app 中,实现数据组件间传递可以使用 Props 或 Vuex。
Props 是一种组件通信的方式,通过向子组件传递数据来实现组件间的数据传递。下面是一个示例:
父组件:
<template>
<child :message="hello"></child>
</template>
<script>
import Child from '@/components/Child.vue';
export default {
components: {
Child
},
data() {
return {
hello: 'Hello World'
};
}
}
</script>
子组件:
<template>
<div>{{ message }}</div>
</template>
<script>
export default {
props: {
message: {
type: String,
default: ''
}
}
}
</script>
在上面的示例中,父组件通过向子组件传递一个 message
属性来实现数据传递。子组件则通过 props
属性定义这个属性并进行接收,然后在模板中使用。
另一种方式是使用 Vuex 进行组件间数据共享。下面是一个简单的示例:
// store/index.js
import Vue from 'vue';
import Vuex from 'vuex';
Vue.use(Vuex);
export default new Vuex.Store({
state: {
count: 0
},
mutations: {
increment(state) {
state.count++;
}
},
actions: {
increment(context) {
context.commit('increment');
}
}
});
// components/Child.vue
<template>
<div>{{ count }}</div>
</template>
<script>
import { mapState } from 'vuex';
export default {
computed: {
...mapState({
count: 'count'
})
}
}
</script>
// components/Parent.vue
<template>
<button @click="increment">+</button>
<child></child>
</template>
<script>
import Child from '@/components/Child.vue';
import { mapActions } from 'vuex';
export default {
components: {
Child
},
methods: {
...mapActions({
increment: 'increment'
})
}
}
</script>
在上面的示例中,创建了一个简单的 Vuex store,其中包含了一个 count
状态和一个 increment
mutation。然后,在子组件中使用了 mapState
辅助函数来获取 count
状态值,而在父组件中使用了 mapActions
辅助函数来触发 increment
mutation。这样就可以通过 Vuex 实现组件间数据传递了。