uni-app小程序中父组件和子组件传值的实现实例 目录 前言 一.父组件向子组件传值 二.子组件向父组件传值 总结 前言 1.父组件向子组件传值 → 通过数据绑定 2.子组件向父组件传值 → 通过事件 一.父组件向子组件传值 通过props实现,即:子组件通过
目录
- 前言
- 一、父组件向子组件传值
- 二、子组件向父组件传值
- 总结
前言
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小程序中父组件和子组件传值的文章就介绍到这了,更多相关uni-app小程序父组件和子组件传值内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们!
本文标题为:uni-app小程序中父组件和子组件传值的实现实例
基础教程推荐
- ExtJS 3.x DateField menuListeners 显示/隐藏 2022-09-15
- 解决ajax的delete、put方法接收不到参数的问题方法 2023-02-23
- vue的 Mixins (混入) 2023-10-08
- 基于bootstrap的上传插件fileinput实现ajax异步上传功能(支持多文件上传预览拖拽) 2023-02-01
- 分页技术原理与实现之无刷新的Ajax分页技术(三) 2023-01-20
- Vue+WebSocket实现在线聊天 2023-10-08
- 深入浅析Jsonp解决ajax跨域问题 2022-12-28
- 关于 css:WebKit (iPad) CSS3: 背景过渡闪烁 2022-09-21
- 第7天:CSS入门 2022-11-04
- ECSHOP中实现ajax弹窗登录功能 2023-01-31