| 父传子 |
我们什么时候需要父组件传值给子组件呢？
当我们的父组件需要控制子组件中显示的内容或者显示的值时。需要将父组件中的内容传递到子组件。
具体实现步骤：
首先需要将子组件引入到父组件当中（在父组件中的引入代码：）
//引入子组件
import Son from "../components/Son.vue"
//注册子组件
components:{
Son,
},
在父组件中设置需要传入子组件的变量，并传入子组件
//在data当中设置传入的变量值
data(){
return{
giveSon:"收到父组件的值"
}
},
//在页面中将值传入子组件,冒号表示v-bind，绑定data中的变量
<son :fromFather="giveSon"></son>
在子组件中接收父组件的传值，并使用
//接收父组件传入的值
props:{
fromFather:{
type:String,
default:''
},
},
//在页面中使用即可
<div class="son">{
{
fromFather}}</div>
注意点：
①：名字问题，三个地方的变量名要保持一致。
②组件中的props
组件中的props中的变量都是父组件传值过来的，并且是单向传递，所以我们无法在子组件中改变props中的变量。
如果试图改变那么就会报错。
那么怎么实现改变props中的值呢？
请看本篇博客
| 子传父 |
我们什么时候需要子组件传值给父组件呢？
一般情况下在父组件的页面中对子组件进行点击后，需要获取到子组件的返回值或者内容，这个时候我们需要使用到子组件传值给父组件。
具体实现步骤：
父组件中引用子组件的地方设置好接受值的事件
//其中valueChange就是绑定的事件，getValue是事件触发的方法
<son @valueChange="getValue"></son>
{
{
fromSon}}
//getVaule事件
getValue(getValue){
//getValue是接收子组件
this.fromSon=getValue//fromSon是父组件中的一个变量，在页面中显示
}
子组件中传值过去，
使用emit方法，而方法的第一个变量是父组件中使用子组件所绑定的事件名称，第二个变量是传过去的值。
//使用emit方法,give是子组件中按钮点击事件绑定的方法
give() {
this.$emit('valueChange',"传值成功了！")
}
传值过去的结果如下：
