父组件与子组件

1.子组件获得父组件传来的数据

1>子组件

定义从父组件接收数据的参数

Number：数字，String：字符串，Object:类对象

<template>
	<view class="page">
        <!--父组件传递的数字-->
        <text>{{num}}</text><br>
        <!--父组件传递的字符串-->
		<text>{{str}}</text><br>
        <!--假设对象的参数-->
        <view>
            <text>{{obj.name}}</text><br>
            <text>{{obj.sex}}</text><br>
            <text>{{obj.age}}</text><br>
        </view>
        <!--list列表-->
        <view v-for="(item,i) in list" :key="i">
            <text>{{item}}</text>
            <br>
        </view>
	</view>
</template>

<script>
	export default {
		name:"ceshiCompone",
        //从父组件接受的参数
		props: {
		    num:Number,//数字类型
			list:Array,//list
			obj:Object,//对象
			str:String//字符串
		},
		data() {
			return {
			
			};
		},
		methods:{
		
		}
	}
</script>

2.父组件

父组件调用子组件+传递参数

<templete>
     <view>
         <!--调用子组件-->
         <ceshiCompone :num="parent_num" :list="parent_list" :obj="parent_obj" :str="parent_str">          
         </ceshiCompone>
    </view>
</templete>


<script>
	export default {
		name:"ceshiCompone",
        //从父组件接受的参数
		props: {
		   
		},
		data() {
			return {
			    parent_num:0,//数字类型
			    parent_list:['name1','name2','name3'],//list
			    parent_obj:{
                   name:'李华',
                   sex:'男',
                   age:10,
                },//对象
			    parent_str:'aaaa'//字符串
			};
		},
		methods:{
            
		}
	}
</script>

2.父组件获得子组件传递的参数

1>子组件

<template>
	<view>
		<button @click="emit">向父组件传递参数</button> 
    </button>
	</view>
</template>

<script>
	export default {
        name:"ceshiCompone2",
		data() {
			return {
				str:'1'
			};
		},
        methods:{
            emit(){
                this.$emit('emitValue',this.str)
            }
        }
	}
</script>

<style lang="scss">

</style>

2>父组件

<template>
	<view>
		<ceshiCompone2 @emitValue="getValue"></ceshiCompone2>
    </button>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				str:''
			};
		},
		onLoad(){
            
		},
        methods:{
            getValue(e){
               this.str=e
            }
        }
	}
</script>

<style lang="scss">

</style>