vue组件通信简明笔记：子传父

之前做了一篇父传子的笔记，需要的小伙伴可以去看看：
vue组件通信简明笔记：父传子
今天的笔记是，子传父通信。

1、 子传父：自定义事件（$emit）

• 在Vue中，子组件向父组件传递数据可以通过自定义事件来实现。
  示例：

<!-- 父组件 -->
<template>
  <div>
    <h1>{{ message }}</h1>
    <child-component @childEvent="handleChildEvent"></child-component>
  </div>
</template>

<script>
import ChildComponent from './ChildComponent.vue';

export default {
  components: {
    ChildComponent
  },
  data() {
    return {
      message: ''
    };
  },
  methods: {
    handleChildEvent(data) {
      this.message = data;
    }
  }
};
</script>  

<!-- 子组件 ChildComponent.vue -->
<template>
  <div>
    <button @click="sendDataToParent">向父组件传递数据</button>
  </div>
</template>

<script>
export default {
  methods: {
    sendDataToParent() {
      const data = 'Hello, Parent!';
      this.$emit('childEvent', data);
    }
  }
};
</script> 

• 父组件通过@childEvent="handleChildEvent"监听子组件触发的childEvent事件。当子组件调用this.$emit('childEvent', data)时，会将data作为参数传递给父组件的handleChildEvent方法。
• 父组件可以在handleChildEvent方法中接收数据并进行相应处理。在这个例子中，父组件将接收到的数据赋值给message，然后在模板中显示出来。
• 当在子组件中点击按钮时，就会向父组件传递数据，并在父组件中更新相应的状态。

2、子传父：$refs

父组件可以通过ref属性引用子组件，直接访问子组件的属性和方法。这样可以实现子组件向父组件传递数据。

<!-- 父组件 -->
<template>
  <div>
    <h1>{{ message }}</h1>
    <!-- 给子组件定义一个 ref 属性-->
    <child-component ref="childRef"></child-component>
    <button @click="getChildData">获取子组件数据</button>
  </div>
</template>

<script>
import ChildComponent from './ChildComponent.vue';

export default {
  components: {
    ChildComponent
  },
  data() {
    return {
      message: ''
    };
  },
  methods: {
    getChildData() {
    //拿到
      const childData = this.$refs.childRef.data;
      this.message = childData;
    }
  }
};
</script> 

<!-- 子组件 ChildComponent.vue -->
<template>
  <div>
    <!-- 子组件的数据 -->
    <p>{{ data }}</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      data: 'Hello, Parent!'
    };
  }
};
</script> 

• 父组件通过给子组件添加ref="属性名"属性来引用子组件。然后，在父组件的方法中，可以通过this.$refs.属性名访问子组件的属性和方法。
• 在这个例子中，父组件通过this.$refs.属性名.data获取子组件的data属性，并将其赋值给message，然后在模板中显示出来。