组件使用 v-model — 非兼容

最后更新于：2022-04-02 08:14:28

>[success] # v-model ~~~ 1.'非兼容'：用于自定义组件时，v-model prop 和事件默认名称已更改： 1.1.'prop'：value -> modelValue； 1.2.'event'：input -> update:modelValue； 2.'非兼容'：v-bind 的 .sync 修饰符和组件的 model 选项已移除，可用 v-model 作为代替； 3.'新增'：现在可以在同一个组件上使用多个 v-model 进行双向绑定； 4.'新增'：现在可以自定义 v-model 修饰符。 ~~~ >[info] ## v-model 非组件基础使用 ~~~ 1.'v-model' 指令在表单 '、

及 <select>' 元素上创建双向数据绑定,但 v-model 本质是语法糖
<input v-model="searchText" /> 这种写法等同于
<input :value="searchText" @input="searchText = $event.target.value" />
~~~
>[info] ## Vue2.x
~~~
1.'v-model' 是语法糖，因此在组件上使用也是同样的，在组件父子值传递往往需要在使用的时候定义事件和
props,  '<ChildComponent :value="pageTitle" @input="pageTitle = $event" />' 
可以简写 '<ChildComponent v-model="pageTitle" />'
当然Vue 也提供了属性'model' 可以自定义属性不再限制于'value 和 input'
// ChildComponent.vue

export default {
  model: {
    prop: 'title',
    event: 'change'
  },
  props: {
    // 这将允许 `value` 属性用于其他用途
    value: String,
    // 使用 `title` 代替 `value` 作为 model 的 prop
    title: {
      type: String,
      default: 'Default title'
    }
  }
}
但是v-model 最大的问题只能作用一次及不会出现以下情况
 '<ChildComponent v-model="pageTitle"  v-model="pageContent"/>'
这时候出现了'.sync' 修饰符来解决这类问题'<ChildComponent :title.sync="pageTitle" />' 可以绑定多个
目的就是一个语法糖的省略用法，更多的详细案例'https://www.kancloud.cn/cyyspring/vuejs/1108931'
~~~
>[info] ## 3.x
~~~
1.来看'3.x','v-model'在'2.x' 的弊端'v-model' 只能在组件使用一次，并且如果想实现类似效果使用多次需要
'.sync' 来定义使用这个语法糖，本质上'v-model 和sync'在组建上做了类似的语法功能，在'3.x'将'.sync'
移除,为了让组件可以使用多个'v-model' 也从原来'value 和input'变成了'modelValue 和 update:modelValue'
~~~
>[danger] ##### 简版的先消化理解
~~~js
1.在组件使用'<ChildComponent v-model="pageTitle" />' 是下面的简写    
    <custom-input
      :modelValue="searchText"
      @update:modelValue="searchText = $event"
    />
来分析组件props 需要有一个'modelValue' ,组件的事件 $emit 需要有一个'update:modelValue'组件写法
  app.component('custom-input', {
    props: ['modelValue'],
    emits: ['update:modelValue'],
    template: `
        <input
        :value="modelValue"
        @input="$emit('update:modelValue', $event.target.value)"
        >
    `
})
2.v-model 可以定义多个写法'<ChildComponent v-model:title="pageTitle" v-model:content="pageContent" />'
是一下的简写
    <ChildComponent
      :title="pageTitle"
      @update:title="pageTitle = $event"
      :content="pageContent"
      @update:content="pageContent = $event"
    />
就是说明你的 props 定义['title','content']，对应的$emits定义['update:title'.'update:content'],事件绑定触发$emits
就看项目需要可以是'input、change、input'
~~~
>[danger] ##### 使用

~~~
<!DOCTYPE html>
<html lang="en">

<head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Document</title>
    </head>

<body>
        
        <div id="app">
            {{searchText}}
            <custom-input v-model="searchText"></custom-input>
        </div>
        <script src="https://unpkg.com/vue@next"></script>
        <script>
         const {createApp} = Vue
         const app = createApp({
             data(){
                 return {
                     searchText:'11'
                 }
             },
             methods:{
                 fontSize(){
                     console.log("1")
                 }
             },
         })
         app.component('custom-input', {
                props: ['modelValue'],
                emits: ['update:modelValue'],
                template: `
                    <input
                    :value="modelValue"
                    @input="$emit('update:modelValue', $event.target.value)"
                    >
                `
            })
         app.mount('#app')
        </script>
    </body>

</html>
~~~
>[danger] ##### 上面的案例官方给的另一种思路
~~~
1.使用计算属性利用get 方法应返回 modelValue property，或用于绑定的任何 property，
set 方法应为该 property 触发相应的 $emit。
~~~
~~~
app.component('custom-input', {
  props: ['modelValue'],
  emits: ['update:modelValue'],
  template: `
    <input v-model="value">
  `,
  computed: {
    value: {
      get() {
        return this.modelValue
      },
      set(value) { 
        this.$emit('update:modelValue', value)
      }
    }
  }
})
~~~
>[info] ## 官方给的迁移策略

我们推荐：

*   检查你的代码库中所有使用`.sync`的部分并将其替换为`v-model`：
    
    ~~~
    <ChildComponent :title.sync="pageTitle" />
    
    
    
    <ChildComponent v-model:title="pageTitle" />
    
    ~~~

*   对于所有不带参数的`v-model`，请确保分别将 prop 和 event 命名更改为`modelValue`和`update:modelValue`
    
    ~~~
    <ChildComponent v-model="pageTitle" />
    
    ~~~
    ~~~
    // ChildComponent.vue
    
    export default {
      props: {
        modelValue: String // 以前是`value：String`
      },
      emits: ['update:modelValue'],
      methods: {
        changePageTitle(title) {
          this.$emit('update:modelValue', title) // 以前是 `this.$emit('input', title)`
        }
      }
    }
    ~~~
                    </div>
                            <script src="https://docs.gechiui.com/cyyspring-vuejs/gc-content/themes/gechiui-book/js/marked.min.js"></script>
                            <script>content=document.getElementById("md-view").innerHTML;</script>';
                            <script>document.getElementById("md-view").innerHTML = marked.parse(content)</script>
                                            </section>
                            </div>
        </div>
        <div class="banquan">
                    </div> 
    </div>
    <a href="" rel="nofollow" class="navigation navigation-prev" id="shangyige">
        <i class="fa fa-angle-left"></i>
    </a>
    <a href="" rel="nofollow" class="navigation navigation-next" id="xiayige">
        <i class="fa fa-angle-right"></i>
    </a>
</div>
</div>
<script src="https://docs.gechiui.com/cyyspring-vuejs/gc-content/themes/gechiui-book/js/js.js"></script>
<script src="https://docs.gechiui.com/cyyspring-vuejs/gc-content/themes/gechiui-book/js/ciambook.js"></script>
<script src="https://docs.gechiui.com/cyyspring-vuejs/gc-content/themes/gechiui-book/js/theme.js"></script>
<script src="https://docs.gechiui.com/cyyspring-vuejs/gc-content/themes/gechiui-book/js/bootstrap.js"></script>
<script src="https://docs.gechiui.com/cyyspring-vuejs/gc-content/themes/gechiui-book/js/fontsettings.js"></script>
</body>
</html>