vue說到元件通訊，無非是父元件傳子元件，子元件傳父元件，跨級元件傳值，同級元件傳值，個人覺得，除了父子元件的傳值，其餘情況就可以用vuex來解決了，這篇先不說vuex，這裡介紹父子元件傳值。不會你打我！

一、父元件傳子元件，核心--props

下面是場景，點選傳值給子元件

在這裡觸發 handleClick 點選事件，額外宣告一個clickData，點選按鈕將 inpMessage 的值賦給 clickData ，再傳給子元件

父元件index.vue

<template>
  <div>
    <input type="text" v-model="inpMessage">
    <button @click="handleClick">點選傳給子元件</button>
    <children :message="clickData" />  //message為子元件props接收的值，clickData為父元件要傳的值
  </div>
</template>

<script>
  import children from './page/children'
  export default {
    name: "index",
    components:{
      children
    },
    data(){
      return{
        inpMessage:'',
        clickData:''
      }
    },
    methods:{
      handleClick(){
        //賦值
        this.clickData = this.inpMessage
      },
    }
  }
</script>

<style></style>
 

子元件children.vue

<template>
    <div>
      <input type="text" v-model="childrenMessage">
      <!--<button @click="childClick">傳值給父元件</button>-->
    </div>
</template>

<script>
    export default {
        name: "children",
      props:{
          message:String  //接收父元件傳過來的值，這是稍微高階一點的寫法，也可以props:[' message']
      },
      data(){
          return{
            childrenMessage:''
          }
      },
      created(){
        this.childrenMessage=this.message  //初始化時候的賦值
      },
    }
</script>

<style scoped>

</style>
 

上面是父元件傳值給子元件的過程，最重要的點是props接收，上面是點選事件傳值，還有一種場景是動態傳值，實時更新父元件的值，自元件動態更新，這裡就要用到watch了，附上自元件程式碼

子元件：watch監聽法

<template>
    <div>
      <input type="text" v-model="childrenMessage">
      <!--<button @click="childClick">傳值給父元件</button>-->
    </div>
</template>

<script>
    export default {
        name: "children",
      props:{
          message:String
      },
      data(){
          return{
            childrenMessage:''
          }
      },
      created(){
        this.childrenMessage=this.message
      },

      //這裡用watch方法來監聽父元件傳過來的值，來實現實時更新
      watch:{
        message(val){    //message即為父元件的值，val引數為值
          this.childrenMessage = val    //將父元件的值賦給childrenMessage 子元件的值
        }
      }

    }
</script>

<style scoped>

</style>
 

二、子元件傳父元件，核心--$emit，這裡附上完整父子傳值的程式碼,vue是不允許子元件向父元件傳值去改變父元件的值的，但是我們可以通過自定義事件的形式去改變值，例如點選事件，再通過$emit來傳遞，程式碼註釋中有介紹。

父元件

<template>
  <div>
    <input type="text" v-model="inpMessage">
    <button @click="handleClick">點選傳給子元件</button>
      //@messageData為子元件宣告傳遞過來的值，函式，getData為函式，val引數是傳遞過來的值
    <children :message="clickData" @messageData="getData"/>
  </div>
</template>

<script>
  import children from './page/children'
  export default {
    name: "index",
    components:{
      children
    },
    data(){
      return{
        inpMessage:'',
        clickData:''
      }
    },
    methods:{
      handleClick(){
        this.clickData = this.inpMessage
      },
        //接收子元件傳遞的值，val引數是傳遞過來的值  ，給inpMessage 賦值，子元件改變父元件的值
      getData(val){
        this.inpMessage = val
        console.log(val)
      }
    }
  }
</script>

<style></style>

子元件

<template>
    <div>
      <input type="text" v-model="childrenMessage">
      <button @click="childClick">傳值給父元件</button>
    </div>
</template>

<script>
    export default {
        name: "children",
      props:{
          message:String
      },
      data(){
          return{
            childrenMessage:''
          }
      },
      created(){
        this.childrenMessage=this.message
      },
      methods:{
        //點選傳值給父元件，通過$emit傳遞，第一個引數messageData相當於傳播的媒介，this.childrenMessage為需要傳遞的值，後面也可以傳遞多個引數
        childClick(){
          this.$emit('messageData',this.childrenMessage)
          console.log(this.childrenMessage)
        }
      },
      watch:{
        message(val){
          this.childrenMessage = val
        }
      }

    }
</script>

後續更新同級元件傳值，和Vuex的使用方法。希望各位大佬批評指正！