【vue組件通訊①】父組件向子組件通訊props

組件實例的做用域是孤立的。這意味着不能 (也不該該) 在子組件的模板內直接引用父組件的數據。父組件的數據須要經過 prop才能下發到子組件中。

怎麼作呢？

一、在子組件中，要顯示地用props選項聲明想要接收父組件的數據：

<template>
    <div class="mint-header is-fixed">
      <div class="mint-header-button is-left">
        <mt-button icon="back"  @click="pageGo"></mt-button>
      </div>
      <!--mytitle是接收父組件過來的數據-->
      <h1 class="mint-header-title">{{mytitle}}</h1>
      <div class="mint-header-button is-left"></div>
    </div>
</template>
<script>
  export default {
    //此寫法是控制傳過來的數據類型
    props:{
      mytitle:String
    },
    data() {
      return{
      }
    },
    methods: {
      pageGo:function () {
        this.$router.go(-1)
      }/*回退到前一頁的函數*/
    },
  }
</script>

上述寫法是控制傳遞參數的類型props還有另外一種寫法，這種寫法是直接聲明參數，如果想要對參數加判斷就使用上述寫法

props:['mytitle'],

二、【靜態props】在父組件中，如果單純想要傳一個靜態字符串，直接以下聲明便可：

<template>
    <div id="template">
        <!--mytitle是要傳給子組件的靜態字符串，
        這邊my-topHeader是子組件，須要引入組件纔可以使用-->
        <my-topHeader mytitle="我是父組件"></my-topHeader>
    </div>
</template>

三、【動態props】在父組件中，有不少時候咱們傳遞的是一個動態的參數，隨着操做的變化而變化，則這時候父組件須要使用v-bind來綁定動態參數：

<template>
    <div id="template">
        <!--mytitle的item是要傳給子組件的動態參數-->
        <my-topHeader :mytitle='item'></my-topHeader>
    </div>
</template>

item是一個動態參數，通常是如今data鉤子裏面定義，而後根據所需的操做進行動態改變數據