vue中父子组件传值（通俗易懂）

1.父子组件传值

首先我要说的是父组件如何向子组件传值
传的值分为静态值和动态值

1.传静态值

        //这是父组件
        <city-header title="123"></city-header>//把title传给子组件     

  //这是子组件
    export default {
      props:"title",//在子组件接收父组件传来的值用prop来接收
    }

2.传动态值

        //这是父组件
        //用v-bind绑定可传动态的值
        <city-header :weekendList="weekendList"></city-header>//把title传给子组件     
    export default {
        data (){
          return{
            weekendList:[]//数组里面的内容是从后端接口获取的动态值
          }
      },
   }

  //这是子组件
    export default {
      props:{
            weekendList:Array
             default: [0,1,2,3,4]//如果为空值则使用默认的
        }//在子组件接收父组件传来的值用prop来接收
    }

当然，你传的值可以是数字、对象、数组等等，参见vue官网。

以上就是单向数据流的一般表现了： 父级 prop 的更新会向下流动到子组件中，但是反过来则不行。

2、子组件向父组件传值

上面说了父组件向子组件传值用prop向下传递，那么子组件向父组件传值呢？其实子组件向父组件传值通过触发$emit方法向上传递

image.png

这是vue官方文档的一张图片，简约而不简单。大概意思就是：
父组件通过prop给子组件下发数据，子组件通过emit事件给父组件发送信息。
使用$emit(eventName,optionalPayload)触发事件。另外，父组件可以在使用子组件的地方直接用v-on来监听子组件触发的事件。
接下来给你们看个实例吧。

<!-- 父组件 -->
<template>
    <div>
      <home-header @childDemo="parentDemo"></home-header>
      <br/> 
      子组件传来的值 : {{message}}
    </div>
</template>-+



<script>
export default {
    // ...
    data: {
        message: ''
    },
    methods: {
       parentDemo(childVaule) {//childVaule是子组件传过来的值
        this.message = childVaule;
      }
    }
}
</script>

<!-- 子组件 -->
<template> 
<div>
    <input type="text" v-model="message" />
    <button @click="click">点击</button>
</div>
</template>
<script>
export default {
    data() {
        return {
          // 默认
          message: '我是来自子组件的消息'
        }
    },
    methods: {
      click() {
          //通过$emit触发childDemo事件，顺便把message传递过去
            this.$emit('childDemo', this.message);
        }
    }    
}
</script>

当点击按钮的时候使用$emit()触发事件，把message传给父组件。

这样我们就基本实现了子组件向父组件传值了。