W~C停用

导航

父组件向子组件中传递参数

父组件通过属性绑定的方式想子组件中传递参数

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 
 4 <head>
 5   <meta charset="UTF-8">
 6   <meta http-equiv="X-UA-Compatible" content="IE=edge">
 7   <meta name="viewport" content="width=device-width, initial-scale=1.0">
 8   <title>父子组件之间的信息传递</title>
 9 </head>
10 
11 <body>
12   <div id='content'>
13     <!--使用v-bind（即属性绑定的方式将父组件中的参数传递到自组件中）-->
14     <cpn :cmovies="movies"></cpn>
15   </div>
16 
17 <!--子组件的template-->
18 <template id="myCpn">
19   <div>
20     <h2 v-for="item in cmovies" v-text="item"></h2>
21   </div>
22 </template>
23 
24 
25   <script src='../Vue/vue.js'></script>
26   <script>
27     //笔记
28       //--1、通过props(properties属性)实现父组件向子组件传递数据
29       //--2、通过事件实现子组件想父组件传递数据
30 
31 
32       //子组件
33       const cpn = {
34         template:"#myCpn",
35         data(){
36           return{}
37         },
38         props:['cmovies']
39       }
40 
41 
42 
43 
44     const content = new Vue({
45       el: '#content',
46       data: {
47         movies:["海王","海贼王","海尔兄弟"]
48       },
49       methods: {
50 
51       },
52       components: {
53         cpn,//将自组件在Vue中注册
54       }
55     });
56   </script>
57 </body>
58 
59 </html>

 

posted on 2021-02-10 23:31  W~C停用  阅读(175)  评论(0)    收藏  举报