vue3 里面model用法使用记录

model在vue里面实现双向绑定。通过父节点向子节点传递参数。子节点通过操作再回传给父节点的变量。有点像prop和$emit组合使用。要知道，在子节点里面，是不能通过=去赋值prop里面的变量。唯一的方法，就是通过$emit调用父类方法，并且把参数传递过去，通过父类修改变量，从而修改子类里面的prop值的参数。

v-model通过双向绑定，可以不用父类自己定义修改参数的方法。直接在子类里面调用指定的方法就可以了。vue3的用法和vue2里面的model使用方式差不多，但是还有点差距。

父节点:

<ChildComponent v-model="pageTitle" />

创建子节点:

// ChildComponent.vue
import Vue, { defineComponent } from 'vue'
export default defineComponent ({
    model: {
        modelValue: String // 以前是`value：String`
    },
    meits: ['update:modelValue'], // 这块我自己测试，可以省略，也能调用，但是会有警告，还是加上比较好一些。这也是vue3上面新加的。
    methos: {
        changePageTitle(title) {
          this.$emit('update:modelValue', title) // 以前是 `this.$emit('input', title)`
        }
    }
})

这样的话，就可以实现一个双向绑定。

备注: 在vue3里面，有一个setup方法，可以定义变量，父节点传递的数据不要在setup里面定义，要放到data里面，否则，不能实现绑定。

vue3里面，可以自定义变量名

父节点:

<ChildComponent v-model:title="pageTitle" />   // 在v-model:自定义变量名称

// ChildComponent.vue
import Vue, { defineComponent } from 'vue'
export default defineComponent ({
    model: {
        prop: 'title', // 以前是`value：String`
    },
    meits: ['update:title'], // 这块我自己测试，可以省略，也能调用，但是会有警告，还是加上比较好一些。这也是vue3上面新加的。
    methos: {
        changePageTitle(title) {
          this.$emit('update:title', title) // 以前是 `this.$emit('input', title)`
        }
    }
})

就可以实现了。

注意，emit方法的格式是 update:变量名称，我改过格式，貌似没有作用。这个貌似就是这个格式需要注意一下。

除此之外，vue3还可以绑定多个变量，这个有待验证。

上面的内容参考官网文档：v-model