组件通信(一)：父子组件通信最原始的方式

父子组件通信最原始的方式(props,父传函数子实现函数)

1.父传子(props:让组件接收外部传过来的数据)

步骤：

1. 父组件通过给子组件标签里边绑定 :xxx(名)="xxxx(要传的值)" 这个东西

   注意，如果传递的数据没有在data函数里边，xxx(名)前面不需要：，如果在data对象里边就需要：

2. 子组件通过props:['xxx(名)']来确认一下，再渲染到页面

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中的数据。

2.子传父(要求父组件给子组件一个函数)

步骤

1. 子传父需要依赖事件，先在子组件定义好一个用来传值的事件(send)

<button @click="send">点我向父组件传值</button>
 methods:{
       send(){
          
       }
   }
复制代码

2. 再在父组件定义一个方法接收子组件传来的值(reviceMessage(接收参数))

methods:{
    reviceMessage(person){
      console.log(person)
    }
  }
复制代码

3. 然后父组件通过父传子的形式把方法传给子组件(:reviceMessage="reviceMessage")

 <school-z :reviceMessage="reviceMessage"/>
复制代码

4. 最后子组件用props['reviceMessage']来接，并且在send函数中通过调用父组件的方法this.reviceMessage(要传的参数)把参数传过去

 props:['reviceMessage'],
 methods:{
       send(){
           this.reviceMessage(this.person)
       }
   }
复制代码