1. 在注冊一個組件時, 添加一個 props 屬性, 將需要添加的 props 作為數組的元素進行添加, 比如下面的例子中, 我們添加了一個變量 name , 他就是一個 props, 我們可以通過它來接收從 父組件 傳進來的數據 ( 韓梅梅 ).
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script> <title>Vue Test</title> </head> <body> <div id="app"> <!-- 這里的 name 表示組件內部的 props name --> <myname name="韓梅梅"></myname> </div> <script> // component myname Vue.component('myname', { props: ['name'], template: '<h2>{{ name }}</h2>' }) // Vue 實例 var vApp = new Vue({ el: "#app" }) </script> </body> </html>
2. 上面這種形式是寫死的, 一般不這樣用, 而是通過 v-bind 將數據放到 $data 中, 這樣可以 動態修改 / 更新 數據.
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script> <title>Vue Test</title> </head> <body> <div id="app"> <family v-for="item in names" v-bind:name="item"></family> </div> <script> // component family Vue.component('family', { props: ['name'], template: '<h2>{{ name }}</h2>' }) // Vue 實例 var vApp = new Vue({ el: "#app", data: { names: ["李雷","韓梅梅","李小雷"] } }) </script> </body> </html>
