vue中 的傳值問題 父傳子和子傳父

vue中 關於$emit的用法

1、父組件可以使用 props 把數據傳給子組件。
2、子組件可以使用 $emit 觸發父組件的自定義事件。

vm.$emit( event, arg ) //觸發當前實例上的事件

vm.$on( event, fn );//監聽event事件后運行 fn； 

 

引用官網的一句話：父子組件的關系可以總結為 prop 向下傳遞，事件向上傳遞

父組件通過 prop 給子組件下發數據，子組件通過事件給父組件發送消息，如下圖所示：

 

 

 父組件傳值給子組件

子組件的代碼：

<template>
    <div id="container">
        {{msg}}
    </div>
</template>
<script>
export default {
  data() {
    return {};
  },
  props:{
    msg: String
  }
};
</script>
<style scoped>
#container{
    color: red;
    margin-top: 50px;
}
</style>

父組件代碼：

<template>
    <div id="container">
        <input type="text" v-model="text" @change="dataChange">
        <Child :msg="text"></Child>
    </div>
</template>
<script>
import Child from "@/components/Child";
export default {
  data() {
    return {
      text: "父組件的值"
    };
  },
  methods: {
    dataChange(data){
        this.msg = data
    }
  },
  components: {
    Child
  }
};
</script>
<style scoped>
</style>

父傳子的實現方式就是通過props屬性，子組件通過props屬性接收從父組件傳過來的值，而父組件傳值的時候使用 v-bind 將子組件中預留的變量名綁定為data里面的數據即可

子組件傳值給父組件

例如：子組件：

<template>
  <div class="train-city">
    <h3>父組件傳給子組件的toCity:{{sendData}}</h3> 
    <br/><button @click='select(`大連`)'>點擊此處將‘大連’發射給父組件</button>
  </div>
</template>
<script>
  export default {
    name:'trainCity',
    props:['sendData'], // 用來接收父組件傳給子組件的數據
    methods:{
      select(val) {
        let data = {
          cityname: val
        };
        this.$emit('showCityName',data);//select事件觸發后，自動觸發showCityName事件
      }
    }
  }
</script>

父組件：

<template>
    <div>
        <div>父組件的toCity{{toCity}}</div>
        <train-city @showCityName="updateCity" :sendData="toCity"></train-city>
    </div>
<template>
<script>
  import TrainCity from "./train-city";
  export default {
    name:'index',
    components: {TrainCity},
    data () {
      return {
        toCity:"北京"
      }
    },
    methods:{
      updateCity(data){//觸發子組件城市選擇-選擇城市的事件
        this.toCity = data.cityname;//改變了父組件的值
        console.log('toCity:'+this.toCity)
      }
    }
  }
</script>

結果預覽

點擊之前：

 

 點擊之后：

 總結：

• 子組件中需要以某種方式例如點擊事件的方法來觸發一個自定義事件
• 將需要傳的值作為$emit的第二個參數，該值將作為實參傳給響應自定義事件的方法