提示:文章写完后,目录可以自动生成,如何生成可参考右边的帮助文档


提示:以下是本篇文章正文内容,下面案例可供参考

一、props

  1. 功能:让组件接收外部传过来的数据

  2. 传递数据:<Demo name="xxx"/>

  3. 接收数据:

    1. 第一种方式(只接收):props:['name']

    2. 第二种方式(限制类型):props:{name:String}

    3. 第三种方式(限制类型、限制必要性、指定默认值):

      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能获得数据

Logo

前往低代码交流专区

更多推荐