Vue学习使用系列四【父子組件通信-父传子】

小半 • 2022年12月21日下午9:50 • .NET • 阅读 252

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:测试效果

文章由极客之音整理，本文链接：https://www.bmabk.com/index.php/post/63978.html

Vue学习使用系列四【父子組件通信-父传子】

相关推荐