Component 組件props 屬性設置
阿新 • • 發佈：2018-02-28
min format xib gpo body AC 簡寫 mail back
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Component 組件props 屬性設置</title> <meta name="flexible" content="initial-dpr=2,maximum-dpr=3" /> <meta name="apple-mobile-web-app-capable" content="yes"> <meta content="yes" name="apple-touch-fullscreen"> <meta content="telephone=no,email=no" name="format-detection"> <meta content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no" name="viewport"> <script src="../assets/js/flexible_css.js"></script> <script src="../assets/js/flexible.js"></script> <script src="../assets/js/vue.js"></script> </head> <body> <div id="app"> <caicai here="China"></caicai> <caicai :here="message"></caicai> <!--第二種方式：通過 v-bind方法 :here 是簡寫 把構造器中data的值傳遞給組件--> </div> </body> <script type="text/javascript"> var app=new Vue({ el:"#app", data:{ message:"liao ning", }, components:{ "caicai":{ template:`<div style="color:green">I‘m from {{here}}</div>`, //{{here}}組件的模板裏讀出屬性值 props:[‘here‘] //props 支撐 支持 使倚靠在某物上;／／here 屬性 傳遞china 值給組件 } } }) //// vue不支持 帶 - 命名方式 可以小城駝峰形式（第二個單詞首字母大寫） 大駝峰 （從第一個單詞開始，每個單詞首字母都大寫） </script> </html>
Component 組件props 屬性設置