Vue系列之 => 父元件向子元件傳值
阿新 • • 發佈：2019-01-01
1 <!DOCTYPE html> 2 <html lang="en"> 3 4 <head> 5 <meta charset="UTF-8"> 6 <meta name="viewport" content="width=device-width, initial-scale=1.0"> 7 <meta http-equiv="X-UA-Compatible" content="ie=edge"> 8 <title>Document</title> 9<script src="./lib/jquery2.1.4.min.js"></script> 10 <script src="./lib/Vue2.5.17.js"></script> 11 <link href="https://cdn.bootcss.com/animate.css/3.7.0/animate.css" rel="stylesheet"> 12 </head> 13 14 <body> 15 <div id="app"> 16 <!-- 父元件可以在引用子元件的時候通過屬性繫結(v-bind:)的形式把17 需要傳遞給子元件的資料以屬性繫結的形式傳遞到子元件內部給子元件使用 --> 18 <com1 v-bind:parentmsg="msg"></com1> 19 </div> 20 21 <template id="mytem"> 22 <div> 23 工要要地地 24 </div> 25 </template> 26 <script> 27 28var vm = new Vue({ 29 el: '#app', 30 data: { 31 msg : '123啊- 父元件中的資料' 32 }, 33 methods: { 34 35 }, 36 components:{ 37 //經過演示，子元件中，預設無法訪問到父元件中的data資料和methods方法 38 com1 : { 39 // 注意：子元件中的data資料並不是通過父元件傳遞過來的，而是子元件自身私有的 40 // props 中的資料都是隻讀的，無法重新賦值 41 //比如，子元件通過ajax請求回來的資料，都可以放到data身上 42 data(){ 43 return { 44 title : '123', 45 content : 'qaq' 46 } 47 }, 48 49 // template : '<h1>這是子元件 --- {{ msg }}</h1>' | msg => undefined 50 template : '<h1>這是子元件 --- {{ parentmsg }}</h1>', 51 // 注意：元件中所有的props中的資料，都是通過父元件傳遞給子元件的 52 //把父元件傳遞過來的parentmsg屬性，先在props陣列中定義一下這樣才能使用這個資料。 53 props : ['parentmsg'] 54 55 } 56 } 57 58 }) 59 </script> 60 </body> 61 62 </html>