Shulou(Shulou.com)06/01 Report--

This article mainly shows you "how to use $emit in vue". The content is simple and clear. I hope it can help you solve your doubts. Let the editor lead you to study and learn this article "how to use $emit in vue".

In vue, "$emit" is used to trigger events on the current instance, and nearby parameters are passed to the listener for callback; child components can use "$emit" to trigger custom events of the parent component with the syntax of "vm.$emit (event, [… args])".

This article operating environment: windows10 system, Vue2.9.6 version, DELL G3 computer.

The usage of $emit in vue

Events are triggered using $emit (eventName) in vue

$emit (eventName) triggers the event on the current instance, and the additional parameters are passed to the listener callback.

Trigger an event using $emit (eventName)

The explanation in Api:

Vm.$emit (event, [… Args])

About the usage of $emit in vue

1. The parent component can use props to transfer data to the child component.

2. A child component can use $emit to trigger a custom event for the parent component.

Vm.$emit (event, arg) / / triggers the event vm.$on (event, fn) on the current instance; / / runs fn after listening for the event event

Examples are as follows:

Sub-component

ToCity passed by parent component to child component: {{sendData}} Click here to transmit 'Dalian' to parent component export default {name:'trainCity', props: ['sendData'], / / to receive data passed by parent component to child component methods: {select (val) {let data = {cityname: val} After the this.$emit ('showCityName',data); / / select event is triggered, the showCityName event} is automatically triggered.

Parent component:

ToCity {{toCity}} import TrainCity from ". / train-city" of the parent component Export default {name:'index', components: {TrainCity}, data () {return {toCity: "Beijing"}}, methods: {updateCity (data) {/ / trigger sub-component city selection-event this.toCity = data.cityname / / changed the value of the parent component console.log ('toCity:'+this.toCity)} above is all the content of the article "how to use $emit in vue". Thank you for reading! I believe we all have a certain understanding, hope to share the content to help you, if you want to learn more knowledge, welcome to follow the industry information channel!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.