vue组件传值：子传父 $emit

案例-自定义事件案例-删除列表项

在子组件中设置自定义事件，触发父组件的监听事件函数调用

this.$emit(自定义事件名 XXX, 数据传递) 

在父组件中定义事件监听函数，并引用子组件标签上 v-on 绑定事件监听。
@自定义事件名=事件监听函数

  <child  @xxx="deleteHobby"> < /child>

如图：将B页面（子）事件 传到 A页面（父）

A页面引入B组件显示

具体写法：

代码如下：
A页面（父组件）

<!-- 
	@自定义事件名  = 事件监听函数 在子组件 
	children页面中触发 delete_hobby 事件来调用 deleteHobby 函数 
-->
<child  :hobbies = "hobbies" @delete_hobby = "deleteHobby" />

import child  from "./children";
export default {
  name: "childToFather",
  components: {
    child
  },
  data() {
    return {
      hobbies: [
        {
          url: require("../../../../assets/images/aboutVue/ku1.png"),
          hobby: "吃"
        },
        {
          url: require("../../../../assets/images/aboutVue/ku2.png"),
          hobby: "喝"
        },
        {
          url: require("../../../../assets/images/aboutVue/ku3.png"),
          hobby: "玩"
        },
        {
          url: require("../../../../assets/images/aboutVue/ku4.png"),
          hobby: "乐"
        }
      ],
      
    };
  },
  methods: {
    //删除爱好
    deleteHobby(idx) {
      this.hobbies.splice(idx,1)
    }
  }
};

B页面（子组件）

 <div class="hobbies">
  <div class="hobby" v-for="(item,idx) in hobbies" :key="idx">
    <img :src="item.url" />
    <p>{{item.hobby}}</p>
    <div class="del" @click="deleteFn(idx)">删除</div>
  </div>
</div>

export default {
  name: "children",
  props:["hobbies"],
  data() {
    return { };
  },
  methods: {
     deleteFn(idx){
       //this.$emit("自定义事件名"，数据传递) 
       //在子组件中触发自定义事件并传递参数  
       //父组件中进行事件绑定 @delete_hobby = "监听函数"
         this.$emit("delete_hobby", idx);
     }
  }
};

自定义事件注意

1. 自定义事件只用于子组件向父组件发送消息(数据)
2. 隔代组件或兄弟组件间通信此种方式不合适，可以采用 总线方式