这篇文章主要介绍“uni-app小程序中父组件和子组件传值如何实现”的相关知识,小编通过实际案例向大家展示操作过程,操作方法简单快捷,实用性强,希望这篇“uni-app小程序中父组件和子组件传值如何实现”文章能帮助大家解决问题。
1、父组件向子组件传值 → 通过数据绑定
2、子组件向父组件传值 → 通过事件
通过props实现,即:子组件通过props来接收父组件传过来的值
实现
父组件中:
1、引入子组件
2、注册子组件
3、通过标签形式载入;使用数据绑定进行传值
子组件中:
1、通过props接收父组件中传递过来的值
具体演示代码
父组件:index.vue
<template> <comA :list="listData"></comA> </template> <script> import comA from '@/components/comA.vue' export default{ components:{comA}, data(){ return{ listData:[ {"name": "刘", "age": "12"}, {"name": "肖", "age": "20"} ] } } } </script>
子组件:comA.vue
<template> <view> <block v-for="(item,index) in list" :key="index"> <view class="flex"> <text>{{item.name}}</text> <text>{{item.age}}</text> </view> </block> </view> </template> <script> export default { name: "comA", props:{ list:{ type: [Array], default: [] } }, data() { return {} }, } </script>
通过props实现,即:子组件通过props来接收父组件传过来的值
实现
父组件中:
1、引入子组件
2、注册子组件
3、通过标签形式载入;使用数据绑定进行传值
4、注册子组件函数
子组件中:
1、通过$emit()函数向父组件传值
具体演示代码
父组件:index.vue
<template> <comA @ChildClick="childClick"></comA> </template> <script> import comA from '@/components/comA.vue' export default{ components:{comA}, methods:{ childClick(e){ console.log(e) } } } </script>
子组件:comA.vue
<template> <view @click="sendValue"></view> </template> <script> export default { name:"comA", props:{}, methods:{ sendValue: function(){ // 向父组件传值 this.$emit("childClick","我来自子组件") }, } } </script>
关于“uni-app小程序中父组件和子组件传值如何实现”的内容就介绍到这里了,感谢大家的阅读。如果想了解更多行业相关的知识,可以关注亿速云行业资讯频道,小编每天都会为大家更新不同的知识点。
免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。