父组件与子组件相互传递数据 vue

子组件像父组件传递数据

1.需要触发按钮或者create事件
child.vue子组件

<template>
	<div>
		<div :data="treeDataItem" ref="treeData">子组件</div>
		<button @click="submit">触发</button>
	</div>
</template>
<script>
	//vue3x
	//emits: ['getTreeData'],
  	methods: {
		submit(){
			//this.$emit("getTreeData",this.$refs.treeData.getCheckNodes());
			this.$emit("getTreeData",this.treeDataItem);
		}
		getCheckNodes(){
		}
	}
</script>

父组件

<template>
<Child @getTreeData="'testData($even)'">父组件</Child>
</template>
<script>
	testData(data){
	//子组件的数据
		console.log(data)
	}

</script>

2.不需要在子组件中触发事件（如点击按钮，create事件等等）
Child.vue子组件

<template>
	<div>
		<div :data="treeDataItem" ref="treeData">子组件</div>
		<button @click="submit">触发</button>
	</div>
</template>
<script>
	getData(){
		this.$emit("getTreeData",this.$refs.treeData.getCheckNodes());
	}
	getCheckNodes(){
	}
</script>

父组件

<template>
<Child ref="authTree">父组件</Child>
</template>
<script>
	//调用
	console.log(this.$refs.outhTree.getData())
</script>

父组件像子组件传递数据

父组件

<template>
<Child :dataItem="dataItemData" :msg="msgData" :list="listData">父组件</Child>
</template>
<script>
	data(){
		dataItemData:{name:"1",des:"22"},
		msgData:"111",
		listData:[{name:"1",des:"22"}],
	}
	
</script>

Child.vue组件
父组件像子组件传递数据，要在子组件中props获取

<template>
	<div>
		<div>{{dataItem.name}}</div>
		<div>{{msg}}</div>
		<div v-for="(item,index) in list" :key="index">{{item.name}}</div>
	</div>
</template>
<script>
props:{
	dataItem:{
		type:Object,
		default:{
			
		}
	},
	msg:{
		type:String,
		//default:{
			//msg:'111'
		//}
	},
	list:{
		type:Array,
		//注意要用这种箭头方式
		default:()=>{

		}
		//或者
		//default:{
		//	return ({
			
		//	})
		//}
	}
}
</script>