uniapp中父子组件的传值

组件传值

一. 父组件向子组件传值

通过props来实现, 子组件通过props来接收父组件传过来的值

1 父组件

// 1. 引入子组件
 import Tab from '@/components/tab/tab.vue'
// 2. 在components中对子组件进行注册
export default {
    
    
   components:{
    
    
    	Tab 
	} 

图示

2子组件

//1.通过props接收父组件中传过来的值
 props:['list'],

在标签中显示

最终效果

二. 子组件向父组件传值

子组件通过事件来向父组件传值

1 子组件

<template>
	<view @click="send">
    	点击传值
    </view>
</template>
<script>
	export default{
    
    
        methods:{
    
    
            //点击事件
            send: function(){
    
    
                //向父组件传值
                this.$emit("sendData", "我是子")
            }
        }
    }
</script>

2 父组件

<template>
	<view>
    	<zi @sendData="getData"></zi>
   	</view>
</template>

<script>
    //1.导入子组件
	import zi from '../../components/zi.vue';
    //2.注册子组件
    export dufault {
    
    
        components: {
    
    
            zi
        },
        methods: {
    
    
            getData: function(res){
    
    
                console.log(res) //我是子
            }
        }
    }
</script>

参考链接https://blog.csdn.net/weixin_43167546/article/details/107362671