！！！认真看，我保证你会学到东西。 ！！！
一、父→子
子组件需要做的事：
①首先定义一个子组件叫son。
②在子组件里面设置一个data属性，当作父组件传过来的数值。
③用props声明一下这个数值是父组件传过来的参数。
父组件需要做的事：
①然后定义一个父组件叫father。
②引入子组件。
③注册子组件。
④使用子组件。
⑤给子组件绑定需要传过去的属性。
父组件源码：
<template>
<view>
<h3>父组件</h3>
<input type="text" v-model="value" />
<!-- 使用子组件 -->
<son :data="value"></son>
</view>
</template>
<script>
//引入子组件
import son from '@/pages/son/son.vue'
export default {
data() {
return {
value:'传递的值',
}
},
methods: {
},
//注册子组件
components: {
son
}
}
</script>
<style>
</style>
子组件源码：
<template>
<view>
<h3>子组件</h3>
<h4>{{data}}</h4>
</view>
</template>
<script>
export default {
//这个props类似java中的super。super的作用是即调用父类的成员变量和方法。
props:['data'],
data() {
return {
}
},
methods: {
},
components: {
}
}
</script>
<style>
</style>
效果图如下：
可以看出，父组件传什么文字都是可以传到子组件里面去的。
二、子→父
重点：this.$emit(eventName, value)
$emit方法接收两个参数，eventName是事件名称，父组件需要用该名称接收参数，value是需要传递的值。
this.$emit是uniapp官方推出的，详细见官方：
https://uniapp.dcloud.io/collocation/frame/communication?id=emit
子组件需要做的事：
①首先定义一个子组件叫son。
②在子组件里面设置一个input输入框，并且双向绑定一个属性sonValue（名字可以任意起）。
③在设置一个button按钮，点击触发函数，函数的作用是把上面输入框输入的数值传达父组件里面。
父组件需要做的事：
①然后定义一个父组件叫father。
②引入子组件。
③注册子组件。
④使用子组件。
⑤给子组件绑定需要给父组件传的数值。
⑥getSonValue这个方法的作用就是接收子组件传过来的值 赋值给了方法的value，最后渲染出页面。
父组件源码：
<template>
<view>
<h3>父组件: {{ message }}</h3>
<br>
<son @send-value="getSonValue"></son>
</view>
</template>
<script>
import son from '@/pages/son/son.vue'
export default {
data() {
return {
message:''
}
},
methods: {
getSonValue(value){
this.message = value;
}
},
components: {
son
}
}
</script>
<style>
</style>
子组件源码：
<template>
<view>
<h3>子组件</h3>
<input type="text" v-model="sonValue" />
<button @click="send">传递</button>
</view>
</template>
<script>
export default {
data() {
return {
sonValue:''
}
},
methods: {
send(){
this.$emit('send-value',this.sonValue);
}
},
components: {
}
}
</script>
<style>
</style>
效果图如下：
可以看出，在子组件的input输入框输入的文字是可以上传到父组件的。