一般情況下，子元件中無法直接使用父元件的變數。借助子元件的props選項可以實現這一點。
這裡我將乙個vue例項作為乙個父元件：
vue(,
methods:,
components:
})子元件定義如下:
const cpn=,子元件的模板定義為：required:
true
//required為true表示必須傳遞乙個值給此變數
}, count:
},data()}}
<由於我訪問的是父元件中的乙個陣列變數所以這裡可以用v-for指令來遍歷這個陣列。template
id="cpn"
>
<
div>
<
h2 v-for
="item in son_movies"
>}
h2>
<
h2>number :}
h2>
div>
template
>
下面是最重要的一點，使用元件時利用v-bind指令將父元件的變數值傳遞給子元件對應的變數，這樣父元件中變數的值就可以傳遞到子元件中。
<執行效果如下：div
id="div1"
>
<
cpn
:son_movies
="movies"
:count
="true"
>
cpn>
div>
Vue元件通訊之父傳子
元件是vue中的重頭戲，今天開始我會陸續分享自己在學習中的有關元件通訊的一些心得。下面 對上面的程式做個解讀 1.首先定義了乙個全域性的元件名字為blog post 2.title 傳入的就是字串 靜態賦值 如果傳入變數的時候title blog 動態賦值 此時需要v bind指令 3.父傳子的重要...
Vue元件間的通訊 父傳子通訊
一 原理 元件的通訊 父元件向子元件傳遞訊息 方法 通過子元件的props屬性進行傳遞.props屬性設定資料內容變數的定義方式有兩種方式 方式一 字串陣列型別,陣列中的字串就是用於接收父元件所傳資料的自定義變數名稱 這種方式不常用 props 自定義儲存變數名1 自定義儲存變數名2 方式二 物件型...
Vue 之父子元件間的通訊
兄弟元件間傳值 一覽圖 1 靜態傳值 1 在父元件中 在子元件佔位符中直接寫 引數名 引數值 father this is father h1 靜態 父傳子 字串 msg from father.div template 引入子元件，必須 import child from components c...