1.父子組件傳值

首先我要說的是父組件如何向子組件傳值
傳的值分為靜態(tài)值和動態(tài)值

1.傳靜態(tài)值

        //這是父組件
        <city-header title="123"></city-header>//把title傳給子組件     

  //這是子組件
    export default {
      props:"title",//在子組件接收父組件傳來的值用prop來接收
    }

2.傳動態(tài)值

        //這是父組件
        //用v-bind綁定可傳動態(tài)的值
        <city-header :weekendList="weekendList"></city-header>//把title傳給子組件     
    export default {
        data (){
          return{
            weekendList:[]//數(shù)組里面的內(nèi)容是從后端接口獲取的動態(tài)值
          }
      },
   }

  //這是子組件
    export default {
      props:{
            weekendList:Array
             default: [0,1,2,3,4]//如果為空值則使用默認的
        }//在子組件接收父組件傳來的值用prop來接收
    }

當然，你傳的值可以是數(shù)字、對象、數(shù)組等等，參見vue官網(wǎng)。

以上就是單向數(shù)據(jù)流的一般表現(xiàn)了： 父級 prop 的更新會向下流動到子組件中，但是反過來則不行。

2、子組件向父組件傳值

上面說了父組件向子組件傳值用prop向下傳遞，那么子組件向父組件傳值呢？其實子組件向父組件傳值通過觸發(fā)$emit方法向上傳遞

image.png

這是vue官方文檔的一張圖片，簡約而不簡單。大概意思就是：
父組件通過prop給子組件下發(fā)數(shù)據(jù)，子組件通過emit事件給父組件發(fā)送信息。
使用$emit(eventName,optionalPayload)觸發(fā)事件。另外，父組件可以在使用子組件的地方直接用v-on來監(jiān)聽子組件觸發(fā)的事件。
接下來給你們看個實例吧。

<!-- 父組件 -->
<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觸發(fā)childDemo事件，順便把message傳遞過去
            this.$emit('childDemo', this.message);
        }
    }    
}
</script>

當點擊按鈕的時候使用$emit()觸發(fā)事件，把message傳給父組件。

這樣我們就基本實現(xiàn)了子組件向父組件傳值了。