vue-組件嵌套之——父組件向子組件傳值

父組件向子組件傳值步驟：

在這裏先定義一下，相對本案例來講：App.vue是父組件，Second-module.vue是子組件。

 

1、首先，值確定是定義在父組件中的，供全部子組件共享。因此要在父組件的data中定義值：

 

 

2、其次，父組件要和子組件有契合點：就是在父組件中調用、註冊、引用子組件：

　　調用：

 

　　註冊：

 

　　引用：

 

3、接下來，就能夠在父組件和子組件連接的地方（即引用子組件的標籤上），把父組件的值綁定給子組件：

 

這裏我綁定了兩個值，一個是數組，一個是字符串。

 2018-03-30  10:15:55 特別補充：

我在寫完文章後很長一段時間沒再接觸vue，再上手開始寫demo的時候，出現了很多不怎麼被注意的小問題，其中一點和這裏有關，進行補充，特別注意：

總的來講父傳子就是這三個步驟：父組件中定義值、調用子組件並引用、在引用的標籤上給子組件傳值。

可是注意是要用 v-bind: 綁定要傳的值，不用v-bind直接把值放到標籤上，會被當成html的節點屬性解析的。

 

4、最後，子組件內部確定要去接受父組件傳過來的值：props（小道具）來接收：

 

 

另外一種接收方式：這裏注意使用字符串包裹，再這裏踩了一下坑。

具體的接收方式看官方文檔~

5、這樣，子組件內部就能夠直接使用父組件的值了。

 

 

可是有要注意的點：

子組件接受的父組件的值分爲——引用類型和普通類型兩種，

普通類型：字符串（String）、數字（Number）、布爾值（Boolean）、空（Null）

引用類型：數組（Array）、對象（Object）

其中，普通類型是能夠在子組件中更改，不會影響其餘兄弟子組件內一樣調用的來自父組件的值，

可是，引用類型的值，當在子組件中修改後，父組件的也會修改，那麼後果就是，其餘一樣引用了改值的子組件內部的值也會跟着被修改。除非你有特殊的要求這麼去作，不然最好不要這麼作。

 

父組件傳給子組件的值，在子組件中千萬不能修改，因其數據是公用的，改了全部引用的子組件就都改了。

先看一個效果頁面：

左邊的列表欄是引用父組件值的第一個子組件，右邊是引用了一樣值的第二個子組件，他們都有同樣的信息：

 

 

 

開發工具中看也是明顯的6條數據：

 

 

注意對比看最後一條數據: 點擊右邊區域第一個藍色按鈕後，就少了一組數據，固然是兩邊同時少的。

 

 

一樣看開發工具中，App組件的數據是少了一條的。

 

 

 

 

可是傳遞的是字符串、數字、布爾值的時候，在一個組件中修改就不會影響到其餘組件的信息。就沒有關係。

我點擊第二個藍色按鈕，，就只有第二個子組件裏的title改變了，第一個的組件沒有變更

 

嘗試事後，值確實改了，可是vue給我彈出了一個警告：

警告:避免直接對一個道具進行修改，由於當父組件從新呈現時，該值將被覆蓋。相反，使用基於支柱的數據或計算屬性。

 官網說法：

 

總結：

你能夠這麼理解：傳值就是複製過去了一個值的副本，副本是能夠本身隨便改的，可是引用是複製了個快捷方式，是一個指針，他們用的都是父組件中的那一個。

其實理解了js的原型鏈和麪向對象原理後就不難理解這個：

把子組件想象成父組件的實例，那麼有可能父組件引用屬性的值（即方法），都是在父組件的原型上的。而後其餘子組件，共享這一個在父組件原型上的引用值，因此牽一髮而動全身。

（父組件原型：我習慣將其想象成爺爺的身份，構造函數是爸爸，實例是孫子，孫子一切都來自於爺爺，好比說形式。。扯遠了）

可是父組件傳給子組件的值，就像是構造函數中建立的屬性同樣，是由父組件（爸爸）拿着的。

因此當子組件（孫子們）自立門戶（被建立）的時候，父組件將值一人給了一份（爸爸的家產分給了每個孩子）。那麼子組件在本身家裏改動，不會影響同用這個屬性的兄弟組件家裏的值的。

 

 

最後說明：純屬我的爲了理解時胡亂鏈接的關係，不是真正的就是這樣的，不要太在乎。。

 

 

不貼源碼的講解就是耍流氓！

父組件App.vue源碼：

<template>
  <div id="app">
   <app-header></app-header>
   <app-nav></app-nav>
   <app-cont></app-cont>
   <first-module v-bind:newlists = "newlists" v-bind:secondlist = "secondlist"></first-module>
   <!-- 實現父組件給子組件傳值 -->
   <second-module v-bind:newlists ="newlists" v-bind:secondlist = "secondlist"></second-module>
   <app-footer></app-footer>
  </div>
</template>

<script>

  import Header from './components/Header'
  import Footer from './components/Footer'
  import Navbar from './components/Navbar'
  import Content from './components/Content'
  import Firstmodule from './components/First-module'
  import Secondmodule from './components/Second-module'

  export default {
    name: 'app',
    data () {//父組件中定義全局的數據，好傳給須要的子組件們
      return {//return 必定要有，由於data在這裏是一個函數方法，否則函數返回的就是undefiend，找不到數據啊
        newlists: [//傳一個引用：數組
          {title: "Vue-初識Vue及引入CDN",time: "2017/08/15"},
          {title: "Vue-實例化Vue對象",time: "2017/08/15"},
          {title: "Vue-數據和方法",time: "2017/08/15"},
          {title: "Vue-屬性綁定",time: "2017/08/15"},
          {title: "Vue-事件(點擊:雙擊:鼠標事件)",time: "2017/08/15"},
          {title: "Vue-鍵盤事件及鍵值修飾符(alt:enter)",time: "2017/08/15"}
        ],
        secondlist: "我是父組件傳給第二個子組件的文本"//傳一個值：字符串
      }
    },
    components: {//局部註冊組件這裏，可能會定義多個組件，因此component這個單詞加上「s」
      "app-header": Header,
      "app-footer": Footer,
      'app-nav': Navbar,
      "app-cont": Content,
      "first-module": Firstmodule,
      "second-module": Secondmodule
    }
  }
</script>

<style>
  #app {
    font-family: '微軟雅黑', Helvetica, Arial, sans-serif;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-align: center;
    color: #2c3e50;
    margin-top: 10px;
  }
  #app:after{
    content: "";
    clear: both;
    display: block;
    visibility: hidden;
  }
  ul {
    list-style-type: none;
    padding: 0;
    margin: 0;
  }
  .lists{
  }
  .lists li{
    padding: 10px 20px;
    text-align: left;
   }
   .lists li:nth-child(odd){
    background: #f5f5f5;
   }
  .lists a{
    color: #222;
    text-decoration: none;
  }
  .lists a p{
    margin: 5px 0;
  }
  .lists a span{
    color: #999;
    font-size: 12px;
  }
</style>

 

子組件Second-module.vue源碼：

見另外一篇文章底部：http://www.cnblogs.com/padding1015/p/7878741.html

 

聲明：

　　請尊重博客園原創精神，轉載或使用圖片請註明：

　　博主：xing.org1^

　　出處：http://www.cnblogs.com/padding1015/