Vue学习之props属性的使用

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

---

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

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