(全域性註冊)如何使用父元件和子元件
阿新 • • 發佈:2018-12-19
1. 用Vue.component 全域性註冊兩個元件,一個<father>, 一個<child>
2. 在父元件模板中,可以嵌入子元件 <child>
3. 如何傳值:通過 prop 傳值。父元件和子元件都註冊 prop
a. 父元件在 外部(html 層面,div 根元素內),通過prop 獲取 根例項的 data 資料
b. 子元件在父元件模板中,用porp 繫結獲取父元件的prop資料。因為父元件在外部已經通過prop 獲取了根例項的data 資料,所以子元件通過繫結自己的prop 和父元件的prop,就可以獲取根例項的 data 資料
<div id="div"> <father :fa="msg" ></father> </div> <script> Vue.component("father",{ template:` <p>這是父元件{{fa}} <child :chi="fa"></child> </p>`, props:['fa'] }) Vue.component("child",{ template:` <p>這是子元件{{chi}}</p> `, props:['chi'] }) new Vue({ el:"#div", data: { msg:"this is root" } }) </script>