Vuejs學習筆記(二)-2.父元件和子元件的基本使用
阿新 • • 發佈：2021-07-02
父元件和子元件，子元件就是父元件內部註冊的元件
第九行在root根上只需要使用父元件即可，子元件也會被渲染出來
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>04 父元件和子元件</title> 6 </head> 7 <body> 8 <div id="app"> 9 <cpn1></cpn1> 10 </div> 11<script src="../js/vue.js"></script> 12 <script> 13 14 // 感覺子元件必須要放在父元件之前宣告 15 16 // 2.子元件 17 const cpnC2 = Vue.extend({ 18 template: ` 19 <div> 20 <h2>我是子元件的h2</h2> 21 <p>我是子元件的的P</p> 22 </div> 23 ` 24 }) 25 //1.父元件 26 const cpnC1 = Vue.extend({ 27 template: ` 28 <div> 29 <h2>我是父元件的h2</h2> 30 <p>我是父元件的p</p> 31 <cpn2></cpn2> 32 </div> 33 `, 34 components: { 35 cpn2: cpnC2 36 } 37 }) 38 39 // 3.root元件 40 const app = newVue({ 41 el: '#app', 42 data: { 43 message: 'hello' 44 }, 45 components: { 46 cpn1: cpnC1 47 } 48 }) 49 </script> 50 </body> 51 </html>