uniapp组件传值的方法(父传子,子传父,对象传值)实战案例
更新时间：2023年03月01日 11:03:28 作者：北海的大鱼
现在的前端开发中基本上都是组件化开发的,下面这篇文章主要给大家介绍了关于uniapp组件传值(父传子,子传父,对象传值)的相关资料,文中通过实例代码介绍的非常详细,需要的朋友可以参考下
前言
最近看到uniapp组件传值的方法，这里记录一下，学过vue的应该都觉得很简单，传值的方法基本与vue的写法差不多
父组件给子组件传值
创建子组件comp.vue，然后在index.vue父页面使用该组件：
<template>
<view class="content">
<image class="logo" src="/static/logo.png"></image>
<comp :name="name" @getMsg="openMsg"></comp>
</view>
</template>
<script>
import comp from '../../components/comp.vue'
import phone from '../../components/phone.vue'
import phoneItem from '../../components/phoneItem.vue'
export default {
components: {
comp,
},
data(){
name: 'parent',
}
}
</script>
可以看到在上面的index页面中有一个数据为name，我们下面使用props将父组件的name值传给子组件comp.vue。首先在父组件中使用子组件的上面进行绑定传参：
<comp :name="name" ></comp>
然后在子组件comp.vue中使用props接收父组件传过来的值：
然后设置一个点击事件打印拿到的name的值
<script>
export default {
// 接收父传给子的参数
props:{
name: String
},
methods: {
sendMsg() {
console.log(this.name)
}
}
}
</script>
打印的值：
子组件给父组件传值
在子组件中使用this.$emit对父组件进行传值
在comp.vue中：
methods: {
sendMsg() {
//子传父
this.$emit('getMsg', "我是子,"+this.name);
}
}
在index.vue中：
定义openMsg方法绑定给@getMsg
<comp :name="name" @getMsg="openMsg"></comp>
然后写openMsg方法：打印传过来的值
methods: {<!--{cke_protected}{C}%3C!%2D%2D%20%2D%2D%3E-->openMsg(msg) {<!--{cke_protected}{C}%3C!%2D%2D%20%2D%2D%3E-->console.log(msg)}}结果如下：这样子组件编写的值传到了父组件中打印了出来
父组件给父组件传对象值
父给子传值还是使用props方法，只是传对象的话写法有些区别
在父组件中：
<phoneItem v-for="(item,index) in songList" :item="item" :key="index"/>
现需要将song中songList的值传过去
<script>
import phoneItem from '../../components/phoneItem.vue'
export default {
components: {
phoneItem
},
data() {
return {
title: 'Hello',
name: 'parent',
song: {
img: 'http://gw.alicdn.com/bao/uploaded/i3/1917047079/O1CN01VlEDD522AEJzpw3A5_!!2-item_pic.png_360x10000.jpg',
title: 'Apple/苹果 iPhone 11 Pro',
price: '8699.00',
marketPrice: '￥8699.00',
},
songList: [
{
img: 'http://gw.alicdn.com/bao/uploaded/i3/1917047079/O1CN01VlEDD522AEJzpw3A5_!!2-item_pic.png_360x10000.jpg',
title: 'Apple/苹果 iPhone 11 Pro',
price: '8699.00',
marketPrice: '￥8699.00',
},
{
img: 'http://gw.alicdn.com/bao/uploaded/i3/1917047079/O1CN01VlEDD522AEJzpw3A5_!!2-item_pic.png_360x10000.jpg',
title: 'Apple/苹果 iPhone 11 Pro',
price: '8699.00',
marketPrice: '￥8699.00',
},
{
img: 'http://gw.alicdn.com/bao/uploaded/i3/1917047079/O1CN01VlEDD522AEJzpw3A5_!!2-item_pic.png_360x10000.jpg',
title: 'Apple/苹果 iPhone 11 Pro',
price: '8699.00',
marketPrice: '￥8699.00',
},
]
}
}
}
</script>
子组件中进行接收：
<template>
<view class="phone">
<image :src="item.img" mode="widthFix"></image>
<view >
{{item.title}}
</view>
<view class="">
<view class="price">
￥{{item.price}}
</view>
<view class="market-price">
{{item.marketPrice}}
</view>
</view>
</view>
</template>
<script>
export default {
//父传给子的参数
props: {
item: {
type: Object,
default() {
return {}
}
}
}
}
</script>
运行结果：
这样就能把对象的值传过来并且渲染：
总结
到此这篇关于uniapp组件传值的方法(父传子,子传父,对象传值)的文章就介绍到这了,更多相关uniapp组件传值内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！
相关文章
我们知道，动画其实是由一帧一帧的图像构成的。有Web动画那么就会存在该动画在播放运行时的帧率。而帧率在不同设备不同情况下又是不一样的。有的时候，一些复杂或者重要动画，需要实时监控它们的帧率，从而更好的优化它们，本文就是介绍Web动画帧率（FPS）计算方法。2021-05-05
这篇文章主要为大家详细介绍了Bootstrap中datetimepicker的使用方法，一款功能强大的日期选择控件，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2016-12-12
这篇文章主要介绍了js获取当前日期前七天的方法,涉及javascript中for语句及日期操作的技巧,需要的朋友可以参考下2015-02-02
这篇文章主要介绍了基于JavaScript创建动态Dom的相关资料,需要的朋友可以参考下2015-12-12
这篇文章主要介绍了用Javascript实现发送短信验证码间隔功能,本文给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下2021-02-02
使用ImageMagick进行图片缩放、合成与裁剪(js+python)
由于需要在服务器端处理，使用就研究使用imagemagick来进行。同时准备封装了一个Node.js和Python的方法，主要还是讲一下然后使用imagemagick来对图片进行缩放、合成后进行裁剪吧2013-09-09
本文主要分享了利用canvas画多边形的示例代码，具有很好的参考价值，下面跟着小编一起来看下吧2017-02-02
Javascript创建自定义对象 创建Object实例添加属性和方法
创建自定义对象的最简单的方式就是创建一个Object实例，然后再为它添加属性和方法2012-06-06
JavaScript中的Reflect对象详解(ES6新特性)
这篇文章主要介绍了JavaScript中的Reflect对象(ES6新特性)的相关资料,非常不错，具有参考借鉴价值，需要的朋友可以参考下2016-07-07
这篇文章主要介绍了leaflet基本使用示例教程,本文通过实例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友参考下吧2023-12-12
最新评论