uniapp子向父传递数据

子向父传递数据,子组件通过触事件的方式向父组件传递数据,

父组件通过监听事件的方式来接收数据

父:

<template>

<view class="content">

{{src}}

<img-border @picSrcChange="mySrcChange" :src="src1"></img-border>

<img-border @picSrcChange="mySrcChange" :src="src2"></img-border>

</view>

</template>


<script>

//8

import imgBorder from "@/components/img-border";

export default {

data() {

return {

src:"",

src1:"http://bj.sgmwppi.cn/uploads/allimg/20101017/1-20101G50246295.png",

src2:"http://bj.sgmwppi.cn/uploads/allimg/20101019/1-201019205640913.png"

}

},

components:{

imgBorder

},

methods:{

mySrcChange(e){

console.log(88888);

this.src=e;

}

},

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>

子:

<template>

<!-- 把props中的src看成是data的变量一样来使用 -->

<image :src="src" mode="" class="img-border" @click="myClick"></image>

</template>


<script>

//子向父传递数据,子组件通过触事件的方式向父组件传递数据,

//父组件通过监听事件的方式来接收数据

export default{

//声明下要接收的,父组件传递过来的属性

props:{

src:String

},

methods:{

//子向父传递数据,通过触发事件

// this.$eimit("自定义的事件名称","要传递的参数")

myClick(){

this.$emit("@picSrcChange",this.src);

}

}

}


</script>


<style>

.img-border{

border-radius: 50%;

}

</style>

uniapp子向父传递数据(图1)

您可能还会对下面的文章感兴趣: