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

Editor to share with you the example analysis of the trigger component options in Vue3, I believe most people do not know much about it, so share this article for your reference, I hope you can learn a lot after reading this article, let's go to know it!

Event name

Like components and prop, event names provide automatic case conversion. If an event is triggered in a child component named after the hump, you will be able to add a kebabcase (dash split naming) listener to the parent component.

This.$emit ('myEvent')

As with props naming, when you use DOM templates, we recommend using kebabcase event listeners. This restriction does not apply if you are using a string template.

Define custom events

Events that have been emitted can be defined on the component through the emits option.

App.component ('custom-form', {emits: [' inFocus', 'submit']})

When a native event (such as click) is defined in the emits option, the native event listener is replaced with the event in the component.

Verify the event thrown

Similar to props type validation, you can validate it if you use object syntax instead of array syntax.

To add validation, you assign a function to the event that takes the parameter passed to the $emit call and returns a Boolean value indicating whether the event is valid.

App.component ('custom-form', {emits: {/ / No click: null, / / verify submit event submit: ({email, password}) = > {if (email & & password) {return true} else {console.warn (' Invalid submit event payloads') Return false}}, methods: {submitForm () {this.$emit ('submit', {email, password})}}) v-model event

By default, the v-model on the component uses modelValue as the props and update:modelValue finish event. We can modify these names by passing parameters to v-model:

In this case, the subcomponent will need a title prop and issue the event that the update:title wants to synchronize:

App.component ('my-component', {props: {title: String}, emits: [' update:title'], template: ``}) multiple v-model bindings

By leveraging the ability to target specific prop and events, as we learned earlier in the v-model parameter, we can now create multiple v-model bindings on a single component instance.

Each v-model will be synchronized to a different prop without the need to add additional options to the component.

App.component ('user-name', {props: {firstName: String, lastName: String}, emits: [' update:firstName', 'update:lastName'], template: ``}) handles v-model modifiers

In 2.x, we provide hard-coding support for modifiers such as .trim on the component v-model. However, it is more useful if the component can support custom modifiers.

In 3.x, the modifiers added to the component v-model are provided to the component through modelModifiers prop.

V-model has built-in modifiers-.trim, .number, and .modifier. However, in some cases, you may also need to add your own custom modifiers.

Let's take an example: capitalize the first letter of the supplied string.

App.component ('my-component', {props: {modelValue: String, modelModifiers: {default: () = > ({})}}, emits: [' update:modelValue'], template: ``, created () {console.log (this.modelModifiers) / / {capitalize: true})

Now that we have set up prop, we can examine the modelModifiers object key and write a handler to change the emitted value. In the following code, we capitalize the string whenever an element triggers an input event.

{{myText}} const app = Vue.createApp ({data () {return {myText:''}) app.component ('my-component', {props: {modelValue: String, modelModifiers: {default: () = > ({})}}, emits: [' update:modelValue'] Methods: {emitValue (e) {let value = e.target.value if (this.modelModifiers.capitalize) {value = value.charAt (0). ToUpperCase () + value.slice (1)} this.$emit ('update:modelValue', value)}}, template: ``}) app.mount (' # app')

For v-model bindings with parameters, the generated prop name will be arg + "Modifiers":

App.component ('my-component', {props: [' description', 'descriptionModifiers'], emits: [' update:description'], template: ``, created () {console.log (this.descriptionModifiers) / / {capitalize: true}) these are all the contents of the article "sample Analysis of trigger components in Vue3". 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.