Hi, I’m Allyn.

In this series of articles, we will use questions and answers to master vUE development and make progress together. Welcome to discuss in the comments area

The problem

2 q

How do I use v-Models in custom components?

3 q

When is the.sync modifier used?

Solution and Extension

Q 2: How do I use v-Models in custom components?

A:

The code implementation is as follows:

<input :value="value" @input="handleInput" placeholder="edit me" />

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

Quotes from:

<v-base-model v-model="baseModelValue" />
// ...
data() {
  return {
    baseModelValue: ''
  }
}
// ...

Copy the code

As you can see, a V-Model on a component makes use of a prop named Value and an event named input by default, but input controls like checkboxes, checkboxes, and so on May use the value property for different purposes.

The Model option can be used to avoid such conflicts:

Custom prop name and event name, code implementation is as follows:

<input type="checkbox" :checked="checked" @change="handleChange" />

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

Quotes from:

<v-base-checkbox v-model="baseCheckboxValue" />

data() {
  return {
    baseCheckboxValue: false
  }
}
Copy the code

The value of baseCheckboxValue here will be passed to this prop named Checked. BaseCheckboxValue is updated when < V-Base-checkbox > triggers a change event with a new value.

⚠️ Note that you still need to declare checked prop in the props option of the component.

To be honest, I am not a big fan of writing v-Model directly in daily development. Not writing V-Model makes the code easier to understand, because the parameter values and events are clear, and it is consistent with the characteristics of one-way data flow.

But using the V-Model does make the code a lot cleaner, pros and cons, it depends on the trade-off.

Question 3: When is the.sync modifier used?

A: Parent-child components interact. The parent component passes a prop value to the child component, and the child component throws an event telling the parent to change the binding value, which can be abbreviated with the.sync modifier.

The first time I encountered the.sync modifier was when I was using the Element-UI dialog component and saw the ghost on the Visible property.

I thought, is there still async and synchronous popovers, is there a.async.

Then I went to see the VUE document, only to find that I was too young. Fortunately, when I met something I didn’t understand, I went to check it first. If I asked my colleagues directly, I would be ashamed, HHH.

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

In article Vue100, ask (I) how to achieve bidirectional binding without using v-model? In VUE, we talked about one-way data flow.

A child component cannot change a prop property passed to it by its parent; instead, it is recommended that it throw an event telling the parent to change the binding value itself.

We get a sense of vUE’s one-way data flow through a counter function

Sub-component code:

<template> <div class="test-sync"> <button @click="add">count + 1</button> <p> we are ti {{count}} champion </p> </div> </template> <script> export default { name: 'test-sync', props: { count: { type: Number, default: 0 } }, methods: { add() { this.$emit('update:count', this.count + 1) } } } </script>Copy the code

Parent component code:

<test-sync :count="count" @update:count="handleAdd" />
//...
data() {
  return {
    count: 8
  }
}
//...
methods: {
  handleAdd(val) {
    this.count = val
  }
}
Copy the code

As you can see, we implemented the prop value change for the child component by throwing an event to tell the parent component to change the binding value.

The whole process is as follows:

In version 2.3.0, vue added the.sync modifier to facilitate this.

Rewrite the above counter function with.sync.

Parent component code:

<test-sync :count.sync="count" />
//...
data() {
  return {
    count: 8
  }
}
//...

Copy the code

With the.sync modifier, you don’t have to write events anymore

⚠️ Note that the event name must be in the form of update:count, otherwise.sync will not work.

Look at the name so lofty function, incredibly and V-Model, just a grammar sugar, I understand the truth, can only manual [face crying].

So back to the Visible property of the Element-UI dialog popover, how to use the.sync property?

Obviously, this is just syntactic sugar, and using the.sync modifier saves you a lot of code.

<el-dialog :visible="dialogVisible" @close="dialogVisible = false">
Copy the code

Is equivalent to

<el-dialog :visible.sync="dialogVisible">
Copy the code

⚠️ Note that without the.sync modifier, you must manually call dialogVisible and set it to false, otherwise you will not be able to close the popover even if you click the Close button.

To test our ideas, go directly to the source code for Element-UI

Sure enough, we found the code we were looking for in line 178 of the dialog component source code:

this.$emit('update:visible', false);
Copy the code

conclusion

In article Vue100, ask (I) how to achieve bidirectional binding without using v-model? In VUE, we talked about one-way data flow.

In this lecture, we continue to talk about the V-model and.sync modifiers, but as a result, we focus on the one-way data flow of vUE

You can see how important vue’s idea of one-way data flow is, influencing the design of almost every component in your daily development.

In the early years, I did not know anything and directly went to the handwritten page, which led to various bugs emerging one after another during the test. The root of it was that I did not understand the idea of one-way data flow of Vue. There were problems with the data flow of the component designed, and I got deeper and deeper into writing more bugs to understand the bugs.

Next time someone asks you a question about the V-model and.sync modifiers, let’s go ahead and explain the one-way data flow of vUE.

I hope my series of vUE articles can help you on the front end.