我是靠谱客的博主 强健铃铛,这篇文章主要介绍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>  <!--如果这里去掉: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>

 

最后

以上就是强健铃铛最近收集整理的关于vue(父子组件的通信--父组件向子组件通信,及props的驼峰标识)的全部内容,更多相关vue(父子组件内容请搜索靠谱客的其他文章。

本图文内容来源于网友提供,作为学习参考使用,或来自网络收集整理,版权属于原作者所有。
点赞(88)

评论列表共有 0 条评论

立即
投稿
返回
顶部