Tell me more about the V-model of Vue3, have you got it?

Life is always full of expectations, ah, why said this sentence? Because it is really seeing people around you lose interest in life, without the point of interest may be no interest in anything. Life is worth looking forward to, after all, their ability to improve the level of excellence, or life has a plan in fact, this is a goal, or can not find that to lose weight ah, give yourself a goal, then or to chase after the star, crazy chase after the star. People always want to experience just can grow, people happy is the most important, everything is people-oriented. Let’s talk about what we are going to talk about today. Some people always feel that it is not clear, so take it out and talk about it alone. Give money? This person is me hahahahahahaha, but should find out or should find out

V-model two-way data binding input

<template>
  <div>
      <input type="text" v-model="search">
      <span>{{search}}</span>
  </div>
</template>
<script >
export default {
    name: '',
    data(){
        return{
            search:'',
        }
    }
  };
</script>
Copy the code

Some of you might just say that, right? You don’t have to! Don’t worry. A good meal never sleeps. I don’t know how it can fly when it’s a duck with a mouth

The v-Model in the component is syntactic sugar no matter what v-Model is

The component that initially completes a search is the parent that passes the value and the child changes the value of the parent

<div> <search @test="getData"></search> < button@click ="submit"> </button> </div> </template> <script> import search from './components/search.vue' export default { name: 'App', components: { search } data(){ return { keywords:'' } } methods:{ getData(val){ this.keywords = val } } } </script>Copy the code

// Subcomponent <template> <div> < input@input ="inputChange" type="text" name="keywords"> </div> </template> <script> export default { props: ['keywords'], methods: { inputChange(e) { this.$emit('test', e.target.value) } } } </script>Copy the code

It seems in the documentation that v-model can be used for components and what kind of brain is this called optimization

<custom-comp v-model="msg"></custom-comp> <! - equivalent to the -- -- > < custom - comp: value = "MSG" @ input = "MSG = $event" > < / custom - comp >Copy the code

</search> < button@click ="submit"> </button> </div> </template> <script> import search from '@/components/index/search.vue' export default { data() { return { keywords: '' } }, components: { search } } </script>Copy the code

// subcomponent <template> <div> <input :value="value" @input =" $emit('input',$event.target.value)" type =" text" name= "keywords"> </div> </template> <script> export default { props:['value'] } </script>Copy the code

What’s the difference between the V-Model of Vue3 and the V-Model of Vue2?

Vue3 When v-Model is used in a custom component, the component receives the value of a property modelValue and then updates the value by firing the Update :modelValue event

<custom-comp v-model="msg"></custom-comp> <! <custom comp :model-value=" MSG "@update:model-value=" MSG = $event"></custom-comp> <! It is recommended to name according to kebab-cased specifications, e.g. Model-value not model-value -->Copy the code

According to the above logic, we will customize an input component to make it work properly. To meet this requirement, then

First: the input value needs to be bound to the props named modelValue

Second: The input event will emit update: modelValue

<script> app.component.props ('custom-comp',{props:['modelValue'], Template: '<input :value="modelValue" @input="$emit('update:modeValue',$event.target.value)"'}) </script <script> app.component('custom-input', { props: ['modelValue'], computed: { value: { get() { return this.modelValue; }, set(v) { this.$emit('update:modelValue', v); }, }, }, template: ` <input v-model="value">`, }); </script>Copy the code

What if I don’t use input? In fact, there is no input native method

<custom-input v-model="searchText"></custom-input>
Copy the code

<script> app.component('custom-count',{ props:{ modelValue:Number }, methods:{ increment() { this.$emit('update:modelValue', ++this.modelValue); }, decrement() { this.$emit('update:modelValue', --this.modelValue); }}, template:` <button @click="increment">+1</button> ~ <button @click="decrement">-1</button> <p>{{modelValue}}</p>` }) </script>Copy the code

Vue3 is different from v-Model parameters

In the above example we found that the v-model received the value of the attribute modelValue, and then triggered the event update:modelValue to update the value. Or is it ok as long as the method and the value are the same? You can actually modify it
```
<custom-input v-model:mv="msg"></custom-input>;
Copy the code
```
```
app.component('custom-input', {
  props: ['mv'],
  template: `
    <input
      :value="mv"
      @input="$emit('update:mv', $event.target.value)"
    >
  `,
});
Copy the code
```

Vue3 supports multiple V-Model bindings

In Vue2, we found that the child component changes the model, which also does not support multiple V-Models. Take a look at the code

<script>
Vue.component('custom-count', {
  model: {
    prop: 'v', // default: value
    event: 'i', // default: input
  },
  props: {
    v: Number,
  },
  data() {
    return {
      count: this.v,
    };
  },
  template: `<button @click="$emit('i', ++count)">+1</button>`,
});
  </script>
Copy the code

Vue3 has added v-model parameter passing, so custom components can support multiple V-Model bindings at the same time: and it is easy to see how many V-Models are bound and what is bound in the parent component’s binding

<user-name v-model:first-name="firstName" v-model:last-name="lastName"></user-name>
Copy the code

<script>
	app.component('user-name', {
  props: {
    firstName: String,
    lastName: String,
  },
  template: `
    <input 
      type="text"
      :value="firstName"
      @input="$emit('update:firstName', $event.target.value)">
    <input
      type="text"
      :value="lastName"
      @input="$emit('update:lastName', $event.target.value)">
  `,
});
</script>
Copy the code

Modifier for vue3’s V-model

We know that the V-model has.trim.lazy. Number modifiers, which are all built-in modifiers by default, so we definitely need to customize, because we can’t have three modifiers for all of them

Let’s try creating your own, custom capitalize modifier, which capitalizes the first letter of a string provided by the V-Model binding into a component. The V-Model modifier is available to components through modelModifiers Prop.

   <my-component v-model.capitalize ="bar"></my-component>
Copy the code

<script>
   app.component('my-component',{
     props:{
       modelValue:String,
       modelModifiers:{
         default:()=>({})
       }
     },
     template:`
           <input type="text" :value="modelValue" @input="$emit('update:modelValue',$event.target.value)">
   `,
     created(){
       console.log(this.modelModifiers) // {capitalize}
     }
   })
</script>
Copy the code

Now that we’ve set the prop values, we can check the modelModifiers object key and write a handler to change the emitted values. We then capitalize the beginning of the string each time an input element triggers an input event

// Parent <div id="app"> < my-Component V-model.capitalize ="myText"></ my-Component > {{myText}} </div> <script> const app =  Vue.createApp({ data() { return { myText: '' } } }) </script>Copy the code

// subcomponent <div> <input type="text" :value="modelValue" @input="emitValue"> </div> <script> export default {props: { modelValue: String, modelModifiers: { default: () => ({}) } }, 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) } }, }; </script>Copy the code

What about us with parameters? Can’t all use modelModifiers? We’re limited to having more than one V-Model binding, I already thought that for v-Model bindings with parameters, the generated prop names would be ARG + “Modifiers”

  <my-component v-model.capitalize ="bar"></my-component>
Copy the code

  <script>
  app.component('my-component', {
    props: ['foo', 'fooModifiers'],
    template: `
      <input type="text" 
        :value="foo"
        @input="$emit('update:foo', $event.target.value)">
    `,
    created() {
      console.log(this.fooModifiers) // { capitalize: true }
    }
  })
  </script>
Copy the code

Tell me more about the V-model of Vue3, have you got it?

Related Posts

For styled components, there are three steps

What data types do JavaScript have, and how do they differ?

Flutter locates widgets, listens for keyboard eject, and handles keyboard occlusion controls