vue父組件向子組件傳值

上節講了子組件向父組件傳值(傳送門)，本節記錄父組件向子組件傳值

　　一：父組件通過向子組件綁定自定義屬性的形式向子組件傳遞數據

　 

 <!-- 父組件 -->
    <div id="app">
        <cpn :cmovies='movies'></cpn>
    </div>

 

　　　　使用v-bind規定子組件要接收的屬性為cmovies,要接收的數據是父元素的movies，此時cmovies作為子組件的數據對象

　　　　說明：

　　　　　　1.在父組件上通過v-bind綁定自定義屬性，子組件通過props項接收這個屬性，並將其作為數據變量進行操作

　　　　　　2.語法： <cpn  :定義子組件接收時使用的屬性名  = ‘父組件的數據變量’></cpn>

　　二：子組件通過props接收父組件傳遞來的數據並對其操作

　　　　

 // 子組件
        const cpn = {
            template: '#ccp' ,
            props: ['cmovies'],
        }

　　　　子組件下的 template模板

   <template id="ccp">
        <div>
             <!-- 子組件根據父組件定義的屬性名對接收到的父組件數據進行操作 -->
            <h1 v-for='item of cmovies'>{{item}}</h1>
        </div>
    </template>

　　　　說明：

　　　　　　1. 子組件使用props項接收父組件規定的屬性名，可以在子組件內部將這個屬性名作為子組件的數據對象操作

　　　　　　2. 在使用props接收到父組件傳遞到的數據時，就可以將父組件規定的屬性名進行操作了

　　

　　一點筆記：

　　　　可以將子組件接收到的數據作為一個obj格式來個性化定制數據。

  // 子組件
        const cpn = {
            template: '#ccp' ,
            props: {
              cmovies:{
                  type: Array, // 定義接收到的數據的類型
                  default:'這個數據變量的默認值',
                  required:false //規定這個數據是否必傳,默認false
              }  
            },
        }

這樣 ，便完成了父向子 傳值的內容。

以上。