This is the first article I participated in beginners’ introduction

A couple of days ago, I saw that elementPlus’ sync was modified to v-Model. I happened to be learning the parent-child component transfer of VUe3.0, so I took a deep look at the v-Model in the official documentation.

What is a v – model

Duh: V-model is a combination of v-bind and V-ON, where v-bind binds the value and V-ON binds the event to the current element.

First know the V-model of Vue3. X

We all know how to use the V-Mdoel of vue2.x. I used element Plus UI framework in the process of learning Vue3.0

<template>
<el-button type="text" @click="dialogVisible = true">Click open Dialog</el-button>

<el-dialog
  title="Tip"
  v-model="dialogVisible"
  width="30%"
  :before-close="handleClose">
  <span>This is a piece of information</span>
  <template #footer>
    <span class="dialog-footer">
      <el-button @click="dialogVisible = false">Take away</el-button>
      <el-button type="primary" @click="dialogVisible = false">determine</el-button>
    </span>
  </template>
</el-dialog>
</template>

<script>
  export default {
    data() {
      return {
        dialogVisible: false
      };
    },
    methods: {
      handleClose(done) {
        this.$confirm('Confirmed closure? ')
          .then(_= > {
            done();
          })
          .catch(_= >{}); }}};</script>

<style>

</style>
Copy the code

The binding of dialogVisible here is changed to the V-model used in element UI :visible.sync=”dialogVisible”.

Is article

Common use of V-Model

There is no doubt that the V-model of VUe3. X still retains the use mode of VUe2.

V-model and.sync modifier

Sync is used to synchronize the props between the parent and child. Vue2. X: the father

<template>
  <div class="parent">
    <son :sonProps.sync='sonProps'></son>
  </div>
</template>

<script>
import son from './son.vue'
export default {
  components: {
    son
  },
  data() {
    return {
      sonProps: 'v-'}}},</script>
Copy the code

Vue2. X:

<template>
  <div class="son">
    {{sonData}}
    <button @click="chang">Change sonProps</button>
  </div>
</template>

<script>
export default {
  props: {
    sonProps: {
      type: String}},computed: {
    sonData: {
      get() {
        return this.sonProps
      },
      set(val) {
        this.$emit('update:sonProps', val)
      }
    }
  },
  methods: {
    chang() {
      this.sonData = 'model'}}},</script>
Copy the code

When vue3. X uses v-Model directly, the props of the child are called ModelValue to get the values passed by the parent component.

Father:<son v-model='sonProps'></son>Son: props: {modelValue: String}
Copy the code

It was not possible to pass only one value in development, so v-Model :propName was used to pass multiple values, so v-Model added multiple v-Model data two-way binding with components.

<son v-model:sonProps='sonProps'></son>
Copy the code

Complete code:

Father: < the template ><div>
    <son v-model:sonProps="sonProps"></son>
  </div>
</template>

<script lang='ts'>

import { ref } from 'vue'
import son from './son.vue';

export default {
  components: {
    son
  },
  setup() {
    const sonProps = ref('v-')
    return {
      sonProps
    }
  },
}
</script>Son: < the template ><div>{{ sonProps }}</div>
    <button @click="change">Change the Props</button>
</template>
<script lang="ts">
import { defineComponent, ref } from 'vue'
export default defineComponent({
    props: { sonProps: String },
    emits: ['update:sonProps'].setup(props, context) {
        const change = () = > {
            context.emit('update:sonProps'.'model')}return {
            change
        }
    }
})
</script>
Copy the code

This component will try to include the emits option until the opportunity arises.

V-mdoel Custom modifier

Built-in modifier

V-models have built-in modifiers. Trim,. Number, and.lazy.

• .trim: Automatically trim the leading and trailing Spaces.
• .number: only numbers are allowed to be output, and the data type is changed from string to number.
• .lazy: assigns when out of focus.

Custom modifiers

The highlight of vue3. X’s V-Model is the ability to customize instructions. This extends the use of v-Model, we sometimes write some custom instructions in the development, when our functional requirements are relatively simple, do not need to write custom instructions, such as the first letter of the string uppercase, to preserve two decimal points and so on.

Father: < the template ><div>
    <son v-model:sonProps.modifiers="sonProps"></son>
  </div>
</template>

<script lang='ts'>

import { ref } from 'vue'
import son from './son.vue';

export default {
  components: {
    son
  },
  setup() {
    const sonProps = ref('v-')
    return {
      sonProps
    }
  },
}
</script>Son: < the template ><div>{{ sonProps }}</div>
    <button @click="change">Change the Props</button>
</template>
<script lang="ts">
import { defineComponent, ref, onMounted } from 'vue'
export default defineComponent({
    props: {
        sonProps: String.sonPropsModifiers: {
            type: Object}},emits: ['update:sonProps'].setup(props, context) {
        onMounted(() = > {
            // This is where the data can be manipulated
            if(props.sonPropsModifiers.modifiers) {
                context.emit('update:sonProps'.'sonPropsModifiers')}})const change = () = > {
            context.emit('update:sonProps'.'model')}return {
            change
        }
    }
})
</script>
Copy the code

The props modifier here is of the form arg + “Modifiers”.

conclusion

• The V-model of VUe3. X retains the original features of VUe2.0.
• V-model is combined with the.sync modifier of V-bind,deleteSync modifier.
• newTwo-way data binding with the component using v-Models multiple times.
• v-modelnewCustom modifiers are provided.