1. 程式人生 > >Vue之父元件向子元件傳遞資料

Vue之父元件向子元件傳遞資料

1.建立子元件,在src/components/資料夾下新建一個Child.vue

2.Child.vue的中建立props,然後建立一個名為message的屬性

這裡寫圖片描述

3.在App.vue中註冊Child元件,並在template中加入child標籤,標籤中新增message屬性並賦值

這裡寫圖片描述

4.我們依然可以對message的值進行v-bind動態繫結

這裡寫圖片描述

5.對於圖片的顯示注意要使用’v-bind’進行繫結,因為這裡是顯示在屬性中所以並不用大括號,而顯示在HTML中的資料必須使用大括號進行包裹

這裡寫圖片描述

總結一下:

  • 子元件在props中建立一個屬性,用以接收父元件傳過來的值
  • 父元件中註冊子元件
  • 在子元件標籤中新增子元件props中建立的屬性
  • 把需要傳給子元件的值賦給該屬性