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

This article mainly explains "how to use v-model in custom components". Interested friends may wish to have a look. The method introduced in this paper is simple, fast and practical. Now let the editor take you to learn how to use v-model in custom components.

How do I use v-model in custom components?

A:

The code is implemented as follows:

/ /... Props: {value: {type: String, default:''}}, methods: {handleInput (e) {this.$emit ('input', e.target.value)}} / /.

Place of quotation:

/ /... data () {return {baseModelValue:''}} / /.

As you can see, v-model on a component takes advantage of a prop named value and an event named input by default, but input controls such as checkboxes and check boxes may use the value property for different purposes.

The model option can be used to avoid such conflicts:

Customize the prop name and event name. The code implementation is as follows:

/ /... Model: {prop: 'checked', event:' change'}, props: {checked: Boolean}, methods: {handleChange (e) {this.$emit ('change', e.target.checked)}} / /.

Place of quotation:

Data () {return {baseCheckboxValue: false}}

The value of the baseCheckboxValue here will be passed into the prop named checked. At the same time, when a change event is triggered with a new value, the value of baseCheckboxValue will be updated.

⚠️ note that you still need to declare the checked prop in the component's props option.

To tell you the truth, in daily development, I don't like to write v-model directly. Not writing v-model can make the code easier to understand, because the passed parameter values and events are clear at a glance, and it also accords with the characteristics of one-way data flow.

But using v-model does make the code much simpler, with both advantages and disadvantages, so it depends on the trade-off.

In what scenarios do you use the .sync modifier?

A: the parent component interacts with the child component. The parent component passes the prop value to the child component, and the child component throws an event to notify the parent component to change the binding value, which can be abbreviated with the .sync modifier.

The first time I touched the .sync modifier was when I saw such a damn thing on the visible property when I was using the dialog component of element-ui.

I wonder if it also implements the display of pop-up windows in the case of async and synchronization, and if there is a .async way to write it.

Then I went to see the vue documents and found that I was too young. Fortunately, I went to check what I didn't understand first. If I went to ask my colleagues directly, I would be very ashamed, hhh.

So how exactly does this .sync modifier work? Don't worry, to understand the use of the .sync modifier, you should start with vue one-way data flow.

In the article to talk about Vue, if you do not achieve two-way binding through v-model? We talked about the one-way data flow of vue.

A child component cannot change the prop property passed to it by the parent component, and it is recommended that it throw an event informing the parent component to change the binding value itself.

We feel the one-way data flow of vue through a counter function.

Subcomponent code:

Count + 1

We are ti {{count}} champions.

Export default {name: 'test-sync', props: {count: {type: Number, default: 0}}, methods: {add () {this.$emit (' update:count', this.count + 1)}

Parent component code:

/ /... data () {return {count: 8}} / /... methods: {handleAdd (val) {this.count = val}}

As you can see, we change the prop value of the child component by throwing an event to notify the parent component to change the bound value.

The whole process is as follows:

The way to write such an one-way data stream has always been recommended by vue. In order to facilitate this way of writing, vue added the syntax candy of the .sync modifier in version 2.3.0.

Rewrite the above counter function with .sync.

Parent component code:

/ /... data () {return {count: 8}} / /.

Is it much more concise? with the .sync modifier, you don't have to write events anymore.

⚠️ note that when an emit event occurs within a child component, the event name must be written in the form of update:count, otherwise the .sync function will not work.

Looking at the high-end function of the name, it is just a grammatical candy like v-model. When I learned the truth, I had to cover my face and cry manually.

So back to the visible property of the element-ui dialog pop-up window, how do you use the .sync property?

Obviously, it's just syntax candy, and if you use the .sync modifier, you can write less code.

Equivalent to

⚠️ note that if you don't write the .sync modifier, be sure to call the close method manually and set dialogVisible to false, otherwise you won't be able to close the pop-up window even if you click the close button.

To verify our idea, look directly at the source code of element-ui

Sure enough, we found the code we wanted in the source code of the dialog component:

This.$emit ('update:visible', false); at this point, I believe you have a deeper understanding of "how to use v-model in custom components". You might as well do it in practice! Here is the website, more related content can enter the relevant channels to inquire, follow us, continue to learn!

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.