Child components can use $emit to let parent components listen to custom events.

vm.$emit( event, arg ); // Trigger the event on the current instance. Arg is the parameter passed to the parent component

vm.$on( event, fn );// Run FN after listening for event events

vue It also implements the observer mode and provides methods such as subscribing to messages, publishing messages, logout messages and so on
	$on(type, fn)			Subscription message method
		type:Message name,	fn:Message callback function. The parameters are $emit Method passed
	$emit(type, ...args)	Publish message method
		type:Message name	...args:Starting with the second parameter, it represents the data passed
	$off(type, fn)			Logoff message method
		type:Message name	fn:Message callback function
	The component is a complete and independent individual, so the data will not be shared with each other, so the publish message and subscribe message must be the same component

1, $emit syntax

1. this $emit ('custom event name ', data to be transmitted);
2. Trigger the event on the current instance, and the data to be transmitted will be transmitted to the listener;

Example 1:
There is a button in the parent and child components, which can operate city at the same time
Define a city variable in the sub component, and click the button to modify the value of city

<template>
    <div>
      city:{{city}}
      <button type="button" @click="myfun('Dalian')">click</button>
    </div>
</template>
<script>
export default{
//Expose the variable city to the parent component and modify it through the parent component
    props:["city"],
    methods:{
        myfun(x){
        //Define an event through $emit, and x represents the parameters to be passed
            this.$emit('showCityName',x);
            //If $emit passes multiple parameters, see the following
            this.$emit("showCityName",x,y,z);
        }
    }
}
</script>

In the parent component:

<template>
  <div>
    <my-ur @showCityName="updateCity" :city="fatherCity"></my-ur>
    <button @click="fatherFun('Changzhou')">Parent node Click</button>
  </div>
</template>
<script>
//Import subcomponents
import u from "@/components/u.vue";
export default {
//Register subcomponents
  components: {
    "my-ur": u,
  },
  data() {
    return {
      fatherCity: "Beijing",
    };
  },
  methods: {
    updateCity(d) {
      this.fatherCity = d;
    },
    fatherFun(x) {
      this.fatherCity = x;
    },
  },
};
</script>

The effects are as follows:

$on listening events

Listen for custom events on the current instance. Events can be managed by VM E m i t trigger. The callback function receives additional parameters for all incoming event trigger functions. Note: use 'emit' trigger. The callback function receives additional parameters for all incoming event trigger functions. Note: use the emit trigger. The callback function receives additional parameters for all incoming event trigger functions. Note: after using 'on' to listen, remember to use $off to destroy the event

1,this.$on ('event name ', callback)
Callback callback on('event name ', callback)
Callback callback the data to be transmitted by emit;

2. Listen to user-defined events on the current instance;

<template>
  <div>
    city:{{ city }}
    <button type="button" @click="myfun('Dalian','Wuhan')">Sub component button click</button>
  </div>
</template>
<script>
export default {
  props: ["city"],
  created() {
    this.$on("showCityName", this.myfun2);
  },
  methods: {
   myfun2(e) {
      console.log(e);
    },
    myfun(x) {
      this.$emit("showCityName", x);
    },
  },
};
</script>

In the above example, use $on to listen to $emit. When the data in $emit changes, it will trigger that the second parameter in $on is a function. In the above example, I put a method, and e in the method is the parameter in $emit

$off
Remove the custom event listener.

• If no parameters are provided, remove all event listeners;
• If only an event is provided, remove all listeners of the event;
• If both an event and a callback are provided, only the listener of the callback is removed.

example:

<template>
  <div>
    city:{{ city }}
    <button type="button" @click="myfun('Dalian', 'Wuhan')">Sub component button click</button>
  </div>
</template>
<script>
export default {
  props: ["city"],
  mounted() {
      this.$on('showCityName',r=>{
          console.log(r);
      })
  },
  methods: {
    myfun(x) {
      this.$emit("showCityName", x);
    },
  },
  destoryed() {
    this.$off("showCityName");
  },
};
</script>