组件使用 v-model -- 非兼容 · vue3.x -- 系列学习

相关文章推荐

开朗的书签 · 南方周末杂志-期刊之家· 2 月前 ·

温暖的便当 · “孙悟空是中国人的超级英雄”——表演艺术家六 ...· 3 月前 ·

知识渊博的斑马 · 鲁能宣布送5名新星赴葡萄牙球员:变强后回报鲁 ...· 4 月前 ·

风流倜傥的熊猫 · Hàn Zì 汉字Storytime - ...· 7 月前 ·

才高八斗的警车 · 血液科-首都医科大学附属北京安贞医院· 1 年前 ·

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">
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Document</title>
    </head>
        
        <div id="app">
            {{searchText}}
            <custom-input v-model="searchText"></custom-input>
        <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)`
  <li>
   <a href="3099929">
    官网给的工具
   </a>
  </li>
  <li>
   <a href="3099926">
    声明vue2 和 vue3
   </a>
  </li>
  <li>
   <a href="3094272">
    Mustache -- 语法
   </a>
  </li>
  <li>
   <a href="3094273">
    v-once -- 只渲染一次
   </a>
  </li>
  <li>
   <a href="3094274">
    v-text -- 插入文本
   </a>
  </li>
  <li>
   <a href="3095314">
    v-html -- 渲染html
   </a>
  </li>
  <li>
   <a href="3095315">
    v-pre -- 显示原始的Mustache标签
   </a>
  </li>
  <li>
   <a href="3095316">
    v-cloak -- 遮盖
   </a>
  </li>
  <li>
   <a href="3095326">
    v-memo（新）-- 缓存指定值
   </a>
  </li>
  <li>
   <a href="3096838">
    v-if/v-show -- 条件渲染
   </a>
  </li>
  <li>
   <a href="3096844">
    v-for -- 循环
   </a>
  </li>
  <li>
   <a href="2697319">
    v-bind -- 知识
   </a>
  </li>
  <li>
   <a href="2697738">
    v-bind -- 修饰符
   </a>
  </li>
  <li>
   <a href="2697739">
    v-on -- 点击事件
   </a>
  </li>
  <li>
   <a href="2700128">
    v-model -- 双向绑定
   </a>
  </li>
  <li>
   <a href="2696499">
    其他基础知识速览
   </a>
  </li>
  <li>
   <a href="3094271">
    常识知识点
   </a>
  </li>
  <li>
   <a href="2698179">
    key -- 作用 （后续要更新）
   </a>
  </li>
  <li>
   <a href="3097243">
    computed -- 计算属性
   </a>
  </li>
  <li>
   <a href="2698214">
    watch -- 侦听
   </a>
  </li>
  <li>
   <a href="2697047">
    防抖和节流
   </a>
  </li>
  <li>
   <a href="3106140">
    vue3 -- 生命周期
   </a>
  </li>
  <li>
   <a href="3103301">
    vue-cli 和 vite 项目搭建方法
   </a>
  </li>
  <li>
   <a href="3111559">
    vite -- 导入动态图片
   </a>
  </li>
  <li>
   <a href="3099927">
    单文件组件 -- SFC
   </a>
  </li>
  <li>
   <a href="2700130">
    组件通信 -- porp
   </a>
  </li>
  <li>
   <a href="2700286">
    组件通信 -- $emit
   </a>
  </li>
  <li>
   <a href="2700391">
    组件通信 -- Provide / Inject
   </a>
  </li>
  <li>
   <a href="2701222">
    组件通信 -- 全局事件总线mitt库
   </a>
  </li>
  <li>
   <a href="2701223">
    插槽 -- slot
   </a>
  </li>
  <li>
   <a href="2701607">
    整体使用案例
   </a>
  </li>
  <li>
   <a href="2702235">
    动态组件 -- is
   </a>
  </li>
  <li>
   <a href="2702236">
    keep-alive
   </a>
  </li>
  <li>
   <a href="3106670">
    分包 -- 异步组价
   </a>
  </li>
  <li>
   <a href="2702614">
    mixin -- 混入
   </a>
  </li>
  <li>
   <a href="2700392">
    v-model-- 组件
   </a>
  </li>
  <li>
   <a href="2702599">
    使用计算属性
   </a>
  </li>
  <li>
   <a href="3106671">
    v-model -- 自定义修饰符
   </a>
  </li>
  <li>
   <a href="2702290">
    Suspense -- 实验属性
   </a>
  </li>
  <li>
   <a href="3114122">
    Teleport -- 指定挂载
   </a>
  </li>
  <li>
   <a href="3106148">
    组件实例 -- $ 属性
   </a>
  </li>
  <li>
   <a href="2702805">
    Option API VS Composition API
   </a>
  </li>
  <li>
   <a href="2702831">
    Setup -- 组合API 入口
   </a>
  </li>
  <li>
   <a href="2702888">
    api -- reactive
   </a>
  </li>
  <li>
   <a href="2703413">
    api -- ref
   </a>
  </li>
  <li>
   <a href="3107642">
    使用ref 和 reactive 场景
   </a>
  </li>
  <li>
   <a href="2704556">
    api -- toRefs 和 toRef
   </a>
  </li>
  <li>
   <a href="2704421">
    api -- readonly
   </a>
  </li>
  <li>
   <a href="3107673">
    判断性 -- API
   </a>
  </li>
  <li>
   <a href="3107674">
    功能性 -- API
   </a>
  </li>
  <li>
   <a href="2705613">
    api -- computed
   </a>
  </li>
  <li>
   <a href="2705614">
    api -- $ref 使用
   </a>
  </li>
  <li>
   <a href="2709788">
    api -- 生命周期
   </a>
  </li>
  <li>
   <a href="2709942">
    Provide 和 Inject
   </a>
  </li>
  <li>
   <a href="2709787">
    watch
   </a>
  </li>
  <li>
   <a href="2706904">
    watchEffect
   </a>
  </li>
  <li>
   <a href="3107771">
    watch vs. watchEffect
   </a>
  </li>
  <li>
   <a href="2710100">
    简单使用composition Api
   </a>
  </li>
  <li>
   <a href="3107656">
    响应性语法糖
   </a>
  </li>
  <li>
   <a href="3107933">
    css -- 功能
   </a>
  </li>
  <li>
   <a href="3111609">
    修改css -- :deep() 和 var
   </a>
  </li>
  <li>
   <a href="2748003">
    Vue3.2 -- 语法
   </a>
  </li>
  <li>
   <a href="3107777">
    ts -- vscode 配置
   </a>
  </li>
  <li>
   <a href="2748004">
    attrs/emit/props/expose/slots -- 使用
   </a>
  </li>
  <li>
   <a href="2748005">
    props -- defineProps
   </a>
  </li>
  <li>
   <a href="2748147">
    props -- defineProps Ts
   </a>
  </li>
  <li>
   <a href="3107778">
    emit -- defineEmits
   </a>
  </li>
  <li>
   <a href="3107779">
    emit -- defineEmits Ts
   </a>
  </li>
  <li>
   <a href="3107781">
    $ref -- defineExpose
   </a>
  </li>
  <li>
   <a href="3107782">
    slots/attrs -- useSlots() 和 useAttrs()
   </a>
  </li>
  <li>
   <a href="3107780">
    自定义指令
   </a>
  </li>
  <li>
   <a href="3114139">
    Vue -- 插件
   </a>
  </li>
  <li>
   <a href="2697032">
    Vue2.x 和 Vue3.x 不同点
   </a>
  </li>
  <li>
   <a href="2702408">
    $children -- 移除
   </a>
  </li>
  <li>
   <a href="2702292">
    v-for 和 ref
   </a>
  </li>
  <li>
   <a href="2697033">
    attribute 强制行为
   </a>
  </li>
  <li>
   <a href="2697856">
    按键修饰符
   </a>
  </li>
  <li>
   <a href="2698209">
    v-if 和 v-for 优先级
   </a>
  </li>
  <li>
   <a href="2702426">
    组件使用 v-model -- 非兼容
   </a>
  </li>
  <li>
   <a href="2711835">
    h -- 函数
   </a>
  </li>
  <li>
   <a href="2711834">
    jsx -- 编写
   </a>
  </li>
  <li>
   <a href="2711836">
    Vue -- Router
   </a>
  </li>
  <li>
   <a href="3108086">
    了解路由和vue搭配
   </a>
  </li>
  <li>
   <a href="3108172">
    vueRouter -- 简单实现
   </a>
  </li>
  <li>
   <a href="2711861">
    安装即使用
   </a>
  </li>
  <li>
   <a href="2711959">
    路由懒加载
   </a>
  </li>
  <li>
   <a href="2713679">
    router-view
   </a>
  </li>
  <li>
   <a href="2711886">
    router-link
   </a>
  </li>
  <li>
   <a href="2723214">
    路由匹配规则
   </a>
  </li>
  <li>
   <a href="2713680">
    404 页面配置
   </a>
  </li>
  <li>
   <a href="3110502">
    路由组件传参
   </a>
  </li>
  <li>
   <a href="3110421">
    路由重定向和别名
   </a>
  </li>
  <li>
   <a href="3110394">
    路由跳转方法
   </a>
  </li>
  <li>
   <a href="2723432">
    Composition API
   </a>
  </li>
  <li>
   <a href="3110554">
    路由元信息
   </a>
  </li>
  <li>
   <a href="2723520">
    路由其他方法 -- 添加/删除/获取
   </a>
  </li>
  <li>
   <a href="3110397">
    服务器配置映射
   </a>
  </li>
  <li>
   <a href="3110715">
    Vuex -- 状态管理
   </a>
  </li>
  <li>
   <a href="3110716">
    Option Api -- VUEX
   </a>
  </li>
  <li>
   <a href="3110718">
    composition API -- VUEX
   </a>
  </li>
  <li>
   <a href="3110781">
    module -- VUEX
   </a>
  </li>
  <li>
   <a href="3110738">
    刷新后vuex 数据同步
   </a>
  </li>
  <li>
   <a href="3111204">
    Pinia -- 状态管理
   </a>
  </li>
  <li>
   <a href="3111206">
    pinia -- state
   </a>
  </li>
  <li>
   <a href="3111216">
    pinia -- getter
   </a>
  </li>
  <li>
   <a href="3111217">
    pinia -- action
   </a>
  </li>
  <li>
   <a href="3111224">
    pinia -- 插件 ？？
   </a>
  </li>
  <li>
   <a href="2697306">
    Vue 源码解读
   </a>
  </li>

</div>

<td width="32" valign="top" align="center">
                        <a href="http://baike.sov5.org/u/tZiFwrh4Z6" ><img
                                src="https://img.100weidu.com/avatars/avatars/user-default.jpg?imageView2/2/w/100&imageView2/2/w/100"
                                class="avatar" style="max-width: 32px; max-height: 32px;"
                                border="0" align="default"></a>
                    </td>
                    <td width="10" valign="top"></td>
                    <td width="auto" valign="top" align="left">
                        <span class="item_hot_topic_title">
                            <a href="http://baike.sov5.org/u/tZiFwrh4Z6">开朗的书签</a>
                             · 
                            <a target="_blank"  href="http://baike.sov5.org/b/ZFg5ap4wvx">南方周末杂志-期刊之家</a>
                        </span>
                        <div class="sep5"></div>
                        <span class="fade">2 月前</span>
                        <small class="gray">
                            
                        </small>
                    </td>
                </tr>
                </tbody>
            </table>
        </div>

<td width="32" valign="top" align="center">
                        <a href="http://baike.sov5.org/u/cgqtswN8Sh" ><img
                                src="https://img.100weidu.com/avatars/avatars/user-default.jpg?imageView2/2/w/100&imageView2/2/w/100"
                                class="avatar" style="max-width: 32px; max-height: 32px;"
                                border="0" align="default"></a>
                    </td>
                    <td width="10" valign="top"></td>
                    <td width="auto" valign="top" align="left">
                        <span class="item_hot_topic_title">
                            <a href="http://baike.sov5.org/u/cgqtswN8Sh">温暖的便当</a>
                             · 
                            <a target="_blank"  href="http://baike.sov5.org/b/fekFzT7qVi">“孙悟空是中国人的超级英雄”——表演艺术家六小龄童谈新作《金猴 ...</a>
                        </span>
                        <div class="sep5"></div>
                        <span class="fade">3 月前</span>
                        <small class="gray">
                            
                        </small>
                    </td>
                </tr>
                </tbody>
            </table>
        </div>

<td width="32" valign="top" align="center">
                        <a href="http://baike.sov5.org/u/77B8u24x6Y" ><img
                                src="https://img.100weidu.com/avatars/avatars/user-default.jpg?imageView2/2/w/100&imageView2/2/w/100"
                                class="avatar" style="max-width: 32px; max-height: 32px;"
                                border="0" align="default"></a>
                    </td>
                    <td width="10" valign="top"></td>
                    <td width="auto" valign="top" align="left">
                        <span class="item_hot_topic_title">
                            <a href="http://baike.sov5.org/u/77B8u24x6Y">知识渊博的斑马</a>
                             · 
                            <a target="_blank"  href="http://baike.sov5.org/b/1lnw5xm0c2">鲁能宣布送5名新星赴葡萄牙球员:变强后回报鲁能_手机新浪网</a>
                        </span>
                        <div class="sep5"></div>
                        <span class="fade">4 月前</span>
                        <small class="gray">
                            
                        </small>
                    </td>
                </tr>
                </tbody>
            </table>
        </div>

<td width="32" valign="top" align="center">
                        <a href="http://baike.sov5.org/u/hoiDJbdEYc" ><img
                                src="https://img.100weidu.com/avatars/avatars/user-default.jpg?imageView2/2/w/100&imageView2/2/w/100"
                                class="avatar" style="max-width: 32px; max-height: 32px;"
                                border="0" align="default"></a>
                    </td>
                    <td width="10" valign="top"></td>
                    <td width="auto" valign="top" align="left">
                        <span class="item_hot_topic_title">
                            <a href="http://baike.sov5.org/u/hoiDJbdEYc">风流倜傥的熊猫</a>
                             · 
                            <a target="_blank"  href="http://baike.sov5.org/b/MT5sVLL01G">Hàn Zì 汉字Storytime - Public Library of Brookline</a>
                        </span>
                        <div class="sep5"></div>
                        <span class="fade">7 月前</span>
                        <small class="gray">
                            
                        </small>
                    </td>
                </tr>
                </tbody>
            </table>
        </div>

<td width="32" valign="top" align="center">
                        <a href="http://baike.sov5.org/u/6l91I9pjPi" ><img
                                src="https://img.100weidu.com/avatars/avatars/user-default.jpg?imageView2/2/w/100&imageView2/2/w/100"
                                class="avatar" style="max-width: 32px; max-height: 32px;"
                                border="0" align="default"></a>
                    </td>
                    <td width="10" valign="top"></td>
                    <td width="auto" valign="top" align="left">
                        <span class="item_hot_topic_title">
                            <a href="http://baike.sov5.org/u/6l91I9pjPi">才高八斗的警车</a>
                             · 
                            <a target="_blank"  href="http://baike.sov5.org/b/DnqrZDuAbU">血液科-首都医科大学附属北京安贞医院</a>
                        </span>
                        <div class="sep5"></div>
                        <span class="fade">1 年前</span>
                        <small class="gray">
                            
                        </small>
                    </td>
                </tr>
                </tbody>
            </table>
        </div>

</div>
        <div class="sep5"></div>

</div>
</div>
        <div class="sep5"></div>

</div>

<strong>
                    <a tar href="http://link.sov5.org" class="dark" target="_blank">Link管理</a>
                      <span class="snow">·</span>  
                    <a href="http://www.51haodu.com/" class="dark" target="_blank">51好读</a>
                      <span class="snow">·</span>  
                    <a href="http://www.sov5.org/" class="dark" target="_blank">Sov5搜索</a>
                      <span class="snow">·</span>  
                    <a href="http://baike.sov5.org/" class="dark" target="_blank">小百科</a>
                </strong>

<div class="sep10"></div>
            小百科 - 百科知识指南

</div>
    </div>
</div>

<script async src="https://www.googletagmanager.com/gtag/js?id=G-F9Q06BKEXP"></script>
<script>
    window.dataLayer = window.dataLayer || [];

function gtag() {
        dataLayer.push(arguments);
    }

gtag('js', new Date());

gtag('config', 'G-F9Q06BKEXP');
</script>

<script type="text/javascript" src="//cpro.baidustatic.com/cpro/ui/cm.js" async="async" defer="defer">
</script>

</body>
</html>