Vue学习之props属性的使用
提示:文章写完后,目录可以自动生成,如何生成可参考右边的帮助文档文章目录一、props二、项目中的使用提示:以下是本篇文章正文内容,下面案例可供参考一、props功能:让组件接收外部传过来的数据传递数据:<Demo name="xxx"/>接收数据:第一种方式(只接收):props:['name']第二种方式(限制类型):props:{name:String}第三种方式(限制类型、限制
·
提示:文章写完后,目录可以自动生成,如何生成可参考右边的帮助文档
提示:以下是本篇文章正文内容,下面案例可供参考
一、props
-
功能:让组件接收外部传过来的数据
-
传递数据:
<Demo name="xxx"/>
-
接收数据:
-
第一种方式(只接收):
props:['name']
-
第二种方式(限制类型):
props:{name:String}
-
第三种方式(限制类型、限制必要性、指定默认值):
props:{ name:{ type:String, //类型 required:true, //必要性 default:'老王' //默认值 } }
备注:props是只读的,Vue底层会监测你对props的修改,如果进行了修改,就会发出警告,若业务需求确实需要修改,那么请复制props的内容到data中一份,然后去修改data中的数据。
-
二、项目中的使用
1.只有父组件能通过props直接将将属性传给子组件,例如TodoList案例中:
父组件App中
<my-header :receiveName="receive"></my-header>
//receive为App中的一个方法,receiveName为传给子组件的数据名
子组件MyHeader中
props:['receiveName'],
2.想让子组件将属性传给父组件符,方法如下
App通过props将receive方法传给MyHeader,使得MyHeader可以调用receive方法接受数据,但函数是在App中的,所以App能获得数据
更多推荐
已为社区贡献2条内容
所有评论(0)