Vue 子组件事件传递给父组件 emit的使用

自定义了子组件，在父组件中引用了子组件，如果要在父组件中传递参数（数据）给子组件，如何操作呢？、

1. 自定义子组件

<template>
  <div class="container">
    <div class="top">
      <p class="p_left">{{titleLeft}}</p>
      <p class="p_right" @click="clickAction">{{titleRight}}</p>
    </div>
    <div class="line"></div>
  </div>
</template>
 
<script>
export default {
  name: "HelloWorld",
  props:['titleLeft','titleRight'],
  data() {
    return {
    };
  },
  methods: {
      clickAction(){
        this.$emit('clickHeadAction',this.titleRight);
      }
  }
};
</script>

2.父组件中调用子组件

<div class="message">
      <ActivityHead :titleLeft="msgLeft" :titleRight="msgRight" @clickHeadAction="clickChild"></ActivityHead>
 
 </div>

<script>
import ActivityHead from "./ActivityHead.vue";
import MessageItem from './MessageItem.vue'
export default {
  name: "HelloWorld",
  components: {
    ActivityHead,
    MessageItem
  },
  methods: {
      clickChild(msg){
          console.log(msg);
      }
  }
};
</script>

说明：

 1.子组件需要使用this.$emit 将子组件的事件进行上级传递。

2. 父组件需要使用@事件名的方式，接收子组件的事件。