父子组件之间两种通信的方式

在vue中，组件之间最常见的通信方式就是父子组件之间的通信，这其中主要分为两种：1.父传子2.子传父

下面就给大家介绍一下：

一.父组件的信息传给子组件

通过props传递数据：类似于传参，父组件调用子组件并传入数据，子组件通过props接收数据并进行一系列需要的操作。

关于props的写法，以一下代码为例：

props: ["todo", "checkedTodo", "deleteTodo"],

二.子组件的信息传给父组件

1.refs获取

可以给子组件添加ref属性，然后通过ref属性名获取子组件的实例

代码实例如下：

<School ref="School" />给子组件School添加ref属性

this.$refs.School.$on("atguigu", this.getSchoolName);然后通过ref属性名获取子组件的实例，自定义事件绑定在谁身上就通过谁来触发事件

2.通过$emit方法

emit这个单词本身具有发射的意思，在这里可以理解为触发

示例代码如下：

<School @atguigu="getSchoolName" @click.native="show" />atguigu是给组件添加的自定义事件

 methods: {
    sendSchoolName() {
      // 触发了vc组件实例对象上的atguigu事件
      this.$emit("atguigu", this.name);
    },
    

在子组件的methods方法中用$emit,其中this指向vuecomponent组件实例对象