vue（父子组件的通信--父组件向子组件通信，及props的驼峰标识）

148 阅读 0 评论 98 点赞

我是靠谱客的博主强健铃铛，这篇文章主要介绍vue（父子组件的通信--父组件向子组件通信，及props的驼峰标识），现在分享给大家，希望可以做个参考。

复制代码

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title></title>
		<style>
			
		</style>
        <script src="./vue.js"></script>
    </head>
    <body>
        <div id="root">
			<cpn v-bind:c-movies="movies" :cmessage="message"></cpn>  
        </div> 
			
		<template id="cpn">
			<div >
				<ul>
					<li v-for="item in cMovies">{{item}}</li>
				</ul>
				<h2>{{cmessage}}</h2>
			</div>
		</template>
		
        <script>
			const cpn={
				template:"#cpn",
//				props:['cmovies','cmessage'],
				props:{
					//1.类型限制
					//cmovies:Array,
					//2.提供默认值
					cmessage:{
						type:String,
						default:"aaa", //当没传这个变量时，默认为”aaa“
						required:true  //使该值必须传
					},
					//类型是对象或数组时，默认值必须是一个函数
					cMovies:{
						type:Array,
						default(){  //默认值
							return []
						}
					}
				},
				data(){
					return {}
				}
			}
            new Vue({
                el:"#root",
                data:{
					movies:["哪咤闹海","海王","海贼王"],
					message:"asd"
                },
				components:{
					cpn  //加强写法
				},
                methods:{
                   
                },
				computed:{	
					
				},
				filters:{   //过滤器
					
				}
            })
        </script>
    </body>
</html>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title></title>
		<style>
			
		</style>
        <script src="./vue.js"></script>
    </head>
    <body>
        <div id="root">
			<cpn v-bind:c-movies="movies" :cmessage="message"></cpn>  <!--如果这里去掉:cmessage="message"，则cmessage为默认值default:"aaa"-->
        </div> 
			<!--//这里要写成:c-M（m）ovies="movies"，因为下面props里面时驼峰命名法cMovies-->
		<template id="cpn">
			<div >
				<ul>
					<li v-for="item in cMovies">{{item}}</li>
				</ul>
				<h2>{{cmessage}}</h2>
			</div>
		</template>
		
        <script>
			const cpn={
				template:"#cpn",
//				props:['cmovies','cmessage'],
				props:{
					//1.类型限制
					//cmovies:Array,
					//2.提供默认值
					cmessage:{
						type:String,
						default:"aaa", //当没传这个变量时，默认为”aaa“
						required:true  //使该值必须传
					},
					//类型是对象或数组时，默认值必须是一个函数
					cMovies:{
						type:Array,
						default(){  //默认值
							return []
						}
					}
				},
				data(){
					return {}
				}
			}
            new Vue({
                el:"#root",
                data:{
					movies:["哪咤闹海","海王","海贼王"],
					message:"asd"
                },
				components:{
					cpn  //加强写法
				},
                methods:{
                   
                },
				computed:{	
					
				},
				filters:{   //过滤器
					
				}
            })
        </script>
    </body>
</html>