利用 props 傳值時，當 傳遞的種類不同時，效果也是不同的

當傳的是 引用 型別時，不管是在 父元件 中改變了這個值，還是在 子元件 中改變了這個值，父元件和子元件中的值，互相影響

而傳的是 傳值 型別時 ，不管是在 父元件 中改變了這個值，還是在 子元件 中改變了這個值，父元件和子元件中的值都不會隨之而改變，都不會互相影響

父元件 傳值給  子元件（props屬性傳值）

第一種方法 

App.vue為父元件

   要想傳值給子元件，父元件就要尋找與之有連線交流的子元件，並通過繫結屬性來傳值

//App.vue
<template>
//通過 v-bind 為子元件繫結屬性並附上我們要傳遞的值
<appHeader v-bind:infos="info"></appHeader> 
</template>

//引入子元件
import Header from './components/Header'



export default {
  name: 'App',
  data(){
    return{
      info:"我是父元件的值"
    }
  },
  components: {
    appHeader:Header
  }
}
 

Header.vue為子元件

父元件傳值過來，子元件就要接收，通過 props 來接收，就可以引用使用了

可以這樣寫

props:['infos']

但這樣是不提倡不規範的可以按照下面的方法來編寫

//Header.vue
export default {
      name: "Header",
      props:{
        infos:{                        //父元件繫結的屬性名
          type:String ,                //值的型別
          required:true                //是否符合規定
        }
      },
      created(){
        console.log(this.infos);         //輸出父元件傳過來的值
      }
}
 

第二種方法

在父元件(App.vue)中定義好需要傳遞的值，並且為需要接收值的子元件新增“連線屬性”

infos 是自己定義的屬性名，用作傳遞的橋樑

fu_info 是父元件需要傳遞給子元件的值

appHeader  是子元件

//App.vue
<template>
 <appHeader v-bind:infos="fu_info"></appHeader>
</template>

export default {
  name: 'App',
  data(){
    return{
      fu_info:"我是父元件的值"
    }
  },
  components: {
    appHeader:Header
  }
}
 

    父元件傳遞了值，子元件就要接收，子元件通過 props 來接收傳遞過來的屬性

<button class="btn btn-info">{{ infos }}</button>   //顯示父元件傳遞過來的值



export default {
      name: "Header",
      props:{
        infos:{                           //infos  父元件檔案中為子元件定義的傳值屬性名
          type:String,
          required:true,
          default:"我是預設值"
        }
      }
}

  按鈕中會顯示 我是父元件的值，這樣就完成了傳值

子元件 傳值給   父元件（事件傳值）

Header.vue為子元件

子元件 想要通過事件傳值給 父元件， 先定義一個事件，作為開始傳值的開始事件，我這裡一點選事件為例

this.$emit("chuan",this.info);，相當於定義了一個自定義 chuan 事件，this.info則是觸發事件函式的引數

//點選觸發 chuanzhi（）方法
<button class="btn btn-info" v-on:click="chuanzhi">事件傳值</button>



export default {
      name: "Header",
      data(){
        return{
          info:"我是子元件中的值"                //傳遞給父元件的值
        }
      },
      methods:{
        chuanzhi:function(){
          this.$emit("chuan",this.info);       //將值放在自定義的事件函式中作為引數
        }
      }
 }

App.vue為父元件

找到子組建在父元件中的元件，併為它附上自定義事件

v-on:chuan="chuanginfor($event) 

    chuan   : 即使父元件中定義的 自定義事件

   chuanginfor($event)  ：此方法中的 $event 是名字固定的，它的值就是父元件中this.$emit("chuan",this.info);的this.info

//子元件
<appHeader v-on:chuan="chuanginfor($event)"></appHeader>

import Header from './components/Header'

export default {
  name: 'App',
  data(){
    return{
      fu_info:""
    }
  },
  methods:{
    chuanginfor:function(event){
          this.fu_info=event
          console.log(this.fu_info);
    }
 },
  components: {
    appHeader:Header
  }
}