目录

（1）父组件向子组件传递信息

1.props：

2.第二种是直接从子组件里面利用￥parent和root引用，获取根组件和父组件中的数据

（2）子组件数据传入父组件

1.通过自定义事件

2.通过$refs引用集合

---

（1）父组件向子组件传递信息

1.props：

在简单的写法中，props的写法汇总如下

props：['prop1','prop2','prop3']，//不加限制的简写形式

 props:{

    //最标准的写法
    title:{
      type: String,//这是几种允许的类型
      default:"默认数值",//默认数值
      required:true//这里要求比如必须传入数值
    },

    //对于数组和对象的特殊情况
    title2:{//这里有一些特殊情况如果要输入的东西是个数组或者对象，默认数值要用函数返回
      type:[Object,Array],
      default:()=>{
        return [];
      },
      required: false
    },

    
    title3:String,//简化写法之一，要求这个只能是字符串

    title4:[String,Number],//简化写法之一要求这个要么是字符串要么是数值

  },


  //另外就是如果prop写了就一定要传入数值。它们默认的required都是true，除非你后续修改了

props在父组件中的传值方法如下

 ???
  <temp  @MyEvent="getMessageFormSon" title="12" :title2='time' title3="12" title4=12 ref="w">
  </temp>

在子组件的使用方法和一般变量差不多，可以理解为属性or变量

 注意一个要补充的点，在父组件向子组件传递数值的时候有两种形式

prop="数值"
这种适用于父组件向子组件传递固定数值

:prop="变量名字"
这种使用bind绑定的方法适用于传递变量，如果想要父组件里面修改子组件也变化

2.第二种是直接从子组件里面利用￥parent和root引用，获取根组件和父组件中的数据

不过好像不太常用，而且会有问题

 <button>父组件的内容{{this.$parent.$data}}</button>
 <button>父组件的内容{{this.$root.$data}}</button>

（2）子组件数据传入父组件

1.通过自定义事件

。。。这个有一点点绕，概括一下就是

子组件里面自定义一个事件，并且携带一个参数

然后父组件里面，在子组件的位置加一个监听指令v-on，监听这个动作，并且准备好一个接受函数

子组件通过$emit的方式来发动这个事件

//子组件中创建一个事件，并且靠函数控制准备发起事件

sentMessageToFather(){
      this.$emit('MyEvent',"数据已经成功发送到了父组件");
    }

//父组件中准备监听这个事件

//子组件的名字就是temp
<temp  @MyEvent="getMessageFormSon" />

对应调用的函数需要一个参数来接收

 然后在子组件中触发函数即可

2.通过$refs引用集合

直接在子组件上创建ref引用

<temp ref="w">

父组件里面直接去refs里面找

但是这种好像也有点问题