组件v-model的用法

2022-02-23 14:29:59 阅读：169 来源： 互联网

标签：modelModifiers true app component 用法组件 model modelValue

<!DOCTYPE html>
<div id="v-model-example" class="demo">
   <my-component v-model.capitalize="myText"></my-component>
      {{ myText }}
    </div>

<script src="https://unpkg.com/vue@next"></script>
<script>
    const app = Vue.createApp({   
       data() {
          return {
             myText: ''
             }
             }
             });
    app.component('my-component', {
       props: {
          modelValue: String,
          modelModifiers: {
             default: () => ({})
             }
             },
  emits: ['update:modelValue'],
  template: `
    <input type="text"
      :value="modelValue"
      @input="$emit('update:modelValue', $event.target.value)">
  `,
  created() {
    console.log(this.modelModifiers) // { capitalize: true }
  }
}).mount('#v-model-example')
</script>

错误的代码：

<!DOCTYPE html>
<div id="v-model-example" class="demo">
   <my-component v-model.capitalize="myText"></my-component>
      
    </div>

<script src="https://unpkg.com/vue@next"></script>
<script>
    const app = Vue.createApp({ });  
 
    app.component('my-component', {
       props: {
          modelValue: String,
          modelModifiers: {
             default: () => ({})
             }
             },
  emits: ['update:modelValue'],
  template: `
    <input type="text"
      :value="modelValue"
      @input="$emit('update:modelValue', $event.target.value)">
  `,
  created() {
    console.log(this.modelModifiers) // { capitalize: true }
  }
}).mount('#v-model-example')
</script>

标签：modelModifiers,true,app,component,用法,组件,model,modelValue
来源： https://blog.csdn.net/weixin_40945354/article/details/123089117

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9

组件v-model的用法