一、父元件傳值給子元件

1.子元件，首先定義一個子元件，然後在子元件中註冊props，然後建立一個名為infos的屬性，用來接收從父元件傳過來的資料

<template>
  <div>
    <div>{{infos}}</div>
  </div>
</template>
<script>
  export default {
    // 接受父元件的值
    props:{
        infos:{
          type:String //傳值的資料型別
        }
      },
  }
</script>
<style>
</style>
 

2.父元件，在父元件中引入子元件,並加入子元件標籤，在子元件標籤中新增子元件props中建立的屬性，將值通過該屬性傳遞給子元件

<template>
    <div>
        <div>父元件</div>
        <child :infos="parentInfo"></child>  
    </div>
</template>
 
<script>
 
import child from './child'  //引入child元件
export default {
    data() {
            return {
                parentInfo: 'a message from parent'  //在data中定義需要傳入的值
            }
        },
        components: {
            child
        }
}
</script>
<style>
</style>
 

二、子元件傳值給父元件

1.子元件

首先子元件要觸發一個自定義事件；然後將需要傳的值作為$emit的第二個引數，該值將作為實參傳給響應自定義事件的方法（下面的例子是傳遞多個數據的處理方法），可按自己的業務邏輯設定傳的值的資料格式與內容。

<template>
  <div>
    <div @click="toParent('資訊一','資訊二')"></div>
  </div>
</template>
<script>
  export default {
     methods:{
        //此處是傳遞了多個引數，根據自己的業務邏輯處理
	toParent(info1,info2){
            var infos = [info1,info1]
            this.$emit("listenToParent",infos);
        }
      }
  }
</script>
<style>
</style>
 

2.父元件

在父元件中註冊子元件，並加入子元件標籤，子元件標籤上繫結對自定義事件的監聽，在監聽的方法裡面即可拿到子元件傳過來的值

<template>
    <div>
        <div>父元件</div>
        <child v-on:listenToParent="getChildMsg"></child>  
    </div>
</template>
 
<script>
 
import child from './child'  //引入child元件
export default {
    data() {
            return {
                
            }
        },
        components: {
            child
        },
        methods:{
            getChildMsg:function(msg){
              console.log(msg)
            }
        }
}
</script>
<style>
</style>