uni-app에서 vue 구성 요소 부자값 전달

1. 부모 구성 요소가 서브 구성 요소에 데이터를 전달(props) 1.parent

<template>
	<view>
		<child :parentData="parentData"></child>
	</view>
</template>
<script>
	import child from "@/components/example/child.vue"
	export default {
     
		components: {
     
			child: child
		},
		data() {
     
			return {
     
				parentData: ' ',
			}
		}
	}
</script>
<style>
</style>

2.child

<template>
	<view>
		<text>{
     {
     parentData}}</text>
	</view>
</template>

<script>
	export default{
     
		data(){
     
			return{
     }
		},
		props:{
     
			parentData:{
     
				type:String,
				default:null
			}
		}
	}
</script>

<style>
</style>

2. 서브어셈블리가 서브어셈블리에 데이터를 전달(emit)1.parent

<template>
	<view>
		<child :parentData="parentData" @changes="childClick" ></child>
		<br>
		<text>{
     {
     childData}}</text>
	</view>
</template>
<script>
	import child from "@/components/example/child.vue"
	export default {
     
		components: {
     
			child: child
		},
		data() {
     
			return {
     
				parentData: ' ',
				childData:''
			}
		},
		methods:{
     
			//  
			childClick(e) {
     
				console.log(e)
				this.childData = e;
			}
		}
	}
</script>
<style>
</style>

2.child

<template>
	<view>
		<text>{
     {
     parentData}}</text>
		<br>
		<view style="width: 100%;">
			<input class="uni-input" focus="true" type="text" value="search" v-model="search" placeholder=" "  placeholder-class="color:#4a4a4a"/>
			<button type="primary" @click="childClick"> </button>
		</view>
	</view>
</template>

<script>
	export default{
     
		data(){
     
			return{
     
				search:''
			}
		},
		props:{
     
			parentData:{
     
				type:String,
				default:null
			}
		},
		methods:{
     
			childClick(){
     
				console.log(this.search);
				this.$emit('changes',this.search)
			}
		}
	}
</script>

<style>
</style>

3. 서브어셈블리와 부모어셈블리 데이터 동기화(.sync) 1.parent

<template>
	<view>
		<child :syncData.sync="syncData" ></child>
		<view class="parent" style="background: #09BB07;">
			<input :value="syncData" v-model="syncData" placeholder=" " style="background: #C0C0C0;" />
			<view>sync (parent):{
     {
     syncData}}</view>
		</view>
	</view>
</template>
<script>
	import child from "@/components/example/child.vue"
	export default {
     
		components: {
     
			child: child
		},
		data() {
     
			return {
     
				syncData: ''
			}
		},
		methods:{
     }
	}
</script>
<style>
</style>

2.child

<template>
	<view>
		<view>
			sync （child）:{
     {
     syncData}} 
		</view>
	</view>
</template>

<script>
	export default{
     
		data(){
     
			return{
     }
		},
		props:{
     
			syncData:{
     
				type:String,
				default:null
			}
		}
	}
</script>

<style>
</style>