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

  1. 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

  2. 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

  3. 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

  4. 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