1：code
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 <title>Document</title> 8 <script src="../assets/vue.js"></script> 9 </head> 10 11 <body> 12 <div id="app"> 13 <p>prop 是子组件用来接受父组件传递过来的数据的一个自定义属性。</p> 14 <p>父组件的数据需要通过 props 把数据传给子组件，子组件需要显式地用 props 选项声明 "prop"</p> 15 <p>注意: prop 是单向绑定的：当父组件的属性变化时，将传导给子组件，但是不会反过来。</p> 16 <hr> 17 <paranttochild :data01="data01"></paranttochild> 18 <paranttochild :data02="data02"></paranttochild> 19 </div> 20 <template id="template"> 21 <div><p>{{data01}}</p>{{data02}}</div> 22 </template> 23 <script> 24 Vue.component("paranttochild", { 25 props: ["data01", "data02"], 26 //下面3种的使用是等同的效果 27 // template: "<div><p>{{msg}}</p><p>{{msg02}}</p></div>" //多個的話需要一個根div 28 // template: "#templateph" //id名稱和模板名稱相同是可以簡寫的 29 template 30 }) 31 var app = new Vue({ 32 el: "#app", 33 data: { 34 data01: "大家好啊", 35 data02: "我是一熱血青年" 36 } 37 }) 38 </script> 39 </body> 40 41 </html>
2:测试效果
