前言
日常开发中经常会遇到组件之间传递参数问题,整理了几种常见的传参方式,方便日后复习梳理.
常见组件传参的三种方式:
1.父组件向子组件传参
2.子组件向父组件传参
3.子组件向非父组件传参
1.父组件向子组件传参
自定义组件:
<template>
<view class="my-componet-box">
<view class="view1">{{title}}</view>
<view class="view2">{{subTitle}}</view>
</view>
</template>
<script>
export default {
name:"my-componet",
data() {
return {
title:'主标题',
subTitle:"副标题"
};
},
// 自定义组件中设置属性方式一,数组方式添加属性名
// props:['title','subTitle']
// 自定义组件中设置属性方式二,对象式添加属性默认值等详情信息
props:{
title: {
type: String,
default: "主标题",
required: false
},
subTitle:{
type: String,
default: "副标题",
required: false,
}
}
}
</script>
<style lang="scss">
.my-componet-box{
width: 400rpx;
height: 200rpx;
background-color: green;
.view1{
font-size: 60rpx;
}
}
</style>
首页index.vue引入自定义组件my-componet,页面内容如下:
<template>
<view class="content">
<view>我是首页</view>
<!-- 不设置组件title和subTitle属性值则显示组件默认值 -->
<!-- <my-componet ></my-componet> -->
<!-- 设置组件title和subTitle属性值则显示设置的信息-->
<my-componet title="首页添加主标题" subTitle="首页添加副标题"></my-componet>
</view>
</template>
<script>
export default {
data() {
return {
}
},
onLoad() {
},
methods: {
}
}
</script>
<style>
.content {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
}
.logo {
height: 200rpx;
width: 200rpx;
margin-top: 200rpx;
margin-left: auto;
margin-right: auto;
margin-bottom: 50rpx;
}
.text-area {
display: flex;
justify-content: center;
}
.title {
font-size: 36rpx;
color: #8f8f94;
}
</style>
首页中通过修改my-componet组件的title和subtitle属性值就可以传递到组件中.组件中显示首页设置的属性信息.展示效果如下:
不设置组件title和subTitle属性值则显示组件默认值:
设置组件title和subTitle属性值则显示设置的信息:
2.子组件向父组件传参
自定义子组件my-componet-2:
<template>
<view>
文本输入框:<input placeholder="请输入内容..." @input="sendData" :value="content"/>
</view>
<view>子组件属性值content:{{content}}</view>
</template>
<script>
export default {
name:"my-componet-2",
data() {
return {
content:"子组件属性值"
};
},
methods:{
sendData(e){
this.$emit('myEvent',e.detail.value)
}
},
props:{
content:{
type:String,
default: "子组件默认内容",
}
}
}
</script>
<style lang="scss">
</style> -->
home页面引用子组件my-componet-2:
<template>
<view>
<vie>home页面</vie>
<div>父子组件显示子组件属性值content:{{content}}</div>
<my-componet-2 :content="content" @myEvent="showData"></my-componet-2>
</view>
</template>
<script>
export default {
data() {
return {
content:''
};
},
methods:{
showData(e){
this.content=e
}
}
}
</script>
<style lang="scss">
</style>
实现效果:
文本框中输入8,子组件显示数据之后,父组件通过自定义事件进行获取数据,另外子组件向父组件传递值时支持对象或数组格式.
子组件数据变化之后需要使用this.$emit进行注册事件,通过事件进行传值;父组件在子组件中使用自定义事件进行获取数据.
3.子组件向非父组件传参
上面案例中my-componet-2在home.vue中引用,如何保证在index.vue中进行传值?可以使用全局事件进行传参.my-componet-2中注册全局事件,index.vue中进行监听接口.具体代码如下:
my-componet-2:
<template>
<view>
文本输入框:<input placeholder="请输入内容..." @input="sendData" :value="content"/>
</view>
<view>子组件属性值content:{{content}}</view>
</template>
<script>
export default {
name:"my-componet-2",
data() {
return {
content:"子组件属性值"
};
},
methods:{
sendData(e){
// 注册全局事件
uni.$emit("gloableEvent",e.detail.value)
}
},
props:{
content:{
type:String,
default: "子组件默认内容",
}
}
}
</script>
<style lang="scss">
</style>
index.vue:
<template>
<view class="content">
<view>我是首页</view>
<!-- 设置组件title和subTitle属性值则显示设置的信息-->
<my-componet title="首页添加主标题" subTitle="首页添加副标题"></my-componet>
<text class="title">{{title}}</text>
</view> -->
<view>
获取自定义组件my-componet-2输入的文本内容content:{{content}}
</view>
</view>
</template>
<script>
export default {
data() {
return {
title: 'Hello',
content:''
}
},
onLoad() {
// 监听注册的全局事件
uni.$on("gloableEvent",function(data){
console.log("首页监听到的data:"+data);
})
},
onUnload(){
uni.$off("gloableEvent")
},
methods: {
}
}
</script>
<style>
.content {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
}
.logo {
height: 200rpx;
width: 200rpx;
margin-top: 200rpx;
margin-left: auto;
margin-right: auto;
margin-bottom: 50rpx;
}
.text-area {
display: flex;
justify-content: center;
}
.title {
font-size: 36rpx;
color: #8f8f94;
}
</style>
home.vue中输入25,index.vue页面中就会打印输入的内容25,说明监听生效.展示效果如下:
注意:onload页面初始化时监听,onupload页面销毁时销毁事件.
更多页面通讯方法可以参考官方链接:
https://uniapp.dcloud.net.cn/tutorial/page.html#off
以上是关于组件进行参数传递整理的几种方式,如果感觉有所帮助欢迎评论区点赞留言!