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

我是帥帥的玉米發表於2017-10-24
Vue元件

元件例項的作用域是孤立的。這意味著不能 (也不應該) 在子元件的模板內直接引用父元件的資料。父元件的資料需要通過 prop才能下發到子元件中。

怎麼做呢？

1、在子元件中，要顯示地用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`],

2、【靜態props】在父元件中，若是單純想要傳一個靜態字串，直接如下宣告即可：

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

3、【動態props】在父元件中，有很多時候我們傳遞的是一個動態的引數，隨著操作的變化而變化，則這時候父元件需要使用v-bind來繫結動態引數：

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

item是一個動態引數，一般是現在data鉤子裡面定義，然後根據所需的操作進行動態改變資料

相關文章