一、通过自定义事件实现子组件向父组件传值
在uniapp中，可以通过自定义事件实现子组件向父组件传值。具体流程如下：
1、在父组件中，在需要接受子组件传值的地方注册一个自定义事件，例如：
<template>
<!-- 这里是父组件 -->
<child-component @myEvent="handleMyEvent"></child-component>
</template>
<script>
export default {
methods: {
handleMyEvent(data) {
console.log(data) // 这里就可以拿到子组件传过来的数据了
}
}
}
</script>
2、在子组件中触发自定义事件，并将数据传递给父组件，例如：
<template>
<!-- 这里是子组件 -->
<button @click="handleClick">传递数据</button>
</template>
<script>
export default {
methods: {
handleClick() {
this.$emit('myEvent', '这是子组件传递过来的数据')
}
}
}
</script>
这样，就完成了子组件向父组件传递数据的过程。
二、通过$refs实现子组件向父组件传值
uniapp中还可以通过$refs实现子组件向父组件传值。具体流程如下：
1、在子组件中定义一个方法，用于向父组件传递数据：
<template>
<!-- 这里是子组件 -->
<button @click="handleClick">传递数据</button>
</template>
<script>
export default {
methods: {
handleClick() {
this.$parent.setData('这是子组件传递过来的数据')
}
}
}
</script>
2、在父组件中定义一个方法，用于接收子组件传过来的数据，并将数据存放到父组件的data中：
<template>
<!-- 这里是父组件 -->
<child-component ref="myChild"></child-component>
</template>
<script>
export default {
methods: {
setData(data) {
this.$set(this.$data, 'myData', data)
}
}
}
</script>
3、在父组件中使用$refs获取子组件实例，并调用子组件中的方法传递数据：
<template>
<!-- 这里是父组件 -->
<child-component ref="myChild"></child-component>
<button @click="handleClick">点击获取数据</button>
</template>
<script>
export default {
methods: {
handleClick() {
this.$refs.myChild.handleClick()
}
}
}
</script>
这样，就完成了子组件向父组件传递数据的过程。
三、通过Vuex实现子组件向父组件传值
uniapp中还可以通过Vuex实现子组件向父组件传值。具体流程如下：
1、在Vuex中定义一个数据仓库，存放需要传递的数据：
// store.js
import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)
const store = new Vuex.Store({
state: {
myData: ''
},
mutations: {
setMyData(state, data) {
state.myData = data
}
}
})
export default store
2、在子组件中调用Vuex中的mutations，将数据存储到数据仓库中：
<template>
<!-- 这里是子组件 -->
<button @click="handleClick">传递数据</button>
</template>
<script>
import { mapMutations } from 'vuex'
export default {
methods: {
...mapMutations(['setMyData']),
handleClick() {
this.setMyData('这是子组件传递过来的数据')
}
}
}
</script>
3、在父组件中使用计算属性获取数据仓库中存储的数据：
<template>
<!-- 这里是父组件 -->
<p>{{ myData }}</p>
<child-component></child-component>
</template>
<script>
import { mapState } from 'vuex'
export default {
computed:{
...mapState(['myData'])
}
}
</script>
这样，就完成了子组件向父组件传递数据的过程。
原创文章，作者：PSTN，如若转载，请注明出处：https://www.506064.com/n/131036.html
微信扫一扫 
支付宝扫一扫 