Custom components are defined using v-models


  <Component-A v-model="msg" />

Copy the code

In ve2. X, in custom components


  {
    props: {
      myValue: {
        type: String.default: ' '}},model: {
      prop: 'myValue'.event: 'update:myValue'  Emit ('update:myValue', newValue) emit('update:myValue', newValue)}}Copy the code

In vue3. X version


/* Fixed event name when updating modelValue in this component update:modelValue */

{
  props: {
    modelValue: {
      type: String.// Fix the prop property name

      default: ' '}}}Copy the code

The value of the above modelValue is also used inside the custom component.


  <Component-B v-model="value" />

Copy the code

 {
   props: {
    modelValue: {
      type: String.// Fix the prop property name

      default: ' '}},computed: {
    value: {
      get() {
        return this.modelValue

      },

      set(value) {
        this.$emit('update:modelValue', value); }}}}Copy the code

A custom component defines multiple V-models


  <Component-C 

      v-model:value="value"

      v-model:title="title"

  />

Copy the code

{
  props: {  // Issue event emit('update: propName', newValue) when they need to update data

    value: {
      type: String.default: ' '

    },

    title: {
      type: String.default: ' '}}}Copy the code

The other effect is similar to the V-Model

  • The parent component

    
      <Component-B :value.sync="msg" />
    
    Copy the code

ComponentB:


export default {
        name: 'ComponentB'.props: {
                value: {
                        type: String.default: ' '}}// When the value of the value attribute is updated

// this.$emit('update: MSG ': newValue)

}

Copy the code