Detailed explanation of the steps of using v-model in custom components in vue

This time I will bring you a detailed explanation of the steps for vue to use v-model in custom components. What are the precautions for vue to use v-model in custom components? The following is a practical case, let’s take a look.

v-model directive

The so-called "directive" actually extends the

HTML tag function (attribute).

Let’s start with a component, without vue-model, normal father-son communication

<!-- parent -->
<template>
<p class="parent">
  <p>我是父亲, 对儿子说： {{sthGiveChild}}</p>
  <Child @returnBack="turnBack" :give="sthGiveChild"></Child>
</p>
</template>
<script>
import Child from './Child.vue';
export default {
  data() {
    return {
      sthGiveChild: '给你100块'
    };
  },
  components: {
    Child
  },
  methods: {
    turnBack(val) {
      this.sthGiveChild = val;
    }
  }
}
</script>

<!-- child -->
<template>
<p class="child">
  <p>我是儿子，父亲对我说： {{give}}</p>
  <a href="javascript:;" rel="external nofollow" rel="external nofollow" rel="external nofollow" @click="returnBackFn">回应</a>
</p>
</template>
<script>
export default {
  props: {
    give: String
  },
  methods: {
    returnBackFn() {
      this.$emit('returnBack', '还你200块');
    }
  }
}
</script>

After clicking the response, what the father said to his son becomes the son’s response. The information received by the son has also changed, enabling communication.

Switch to v-model

<!-- parent -->
<template>
<p class="parent">
  <p>我是父亲, 对儿子说： {{sthGiveChild}}</p>
  <Child v-model="sthGiveChild"></Child>
</p>
</template>
<script>
import Child from './Child.vue';
export default {
  data() {
    return {
      sthGiveChild: '给你100块'
    };
  },
  components: {
    Child
  }
}
</script>

<!-- child -->
<template>
<p class="child">
  <p>我是儿子，父亲对我说： {{give}}</p>
  <a href="javascript:;" rel="external nofollow" rel="external nofollow" rel="external nofollow" @click="returnBackFn">回应</a>
</p>
</template>
<script>
export default {
  props: {
    give: String
  },
  model: {
    prop: 'give',
    event: 'returnBack'
  },
  methods: {
    returnBackFn() {
      this.$emit('returnBack', '还你200块');
    }
  }
}
</script>

Although the copywriting is different, the effect is ultimately the same.

Look at the v-model of the official custom component

Official example

https://vuefe.cn/v2/api/#model

There is this sentence: By default, v-model on a component will use value as prop and input as event.

Try changing the example of the sub-component above, and it will work.

<!-- child -->
<template>
<p class="child">
  <p>我是儿子，父亲对我说： {{value}}</p>
  <a href="javascript:;" rel="external nofollow" rel="external nofollow" rel="external nofollow" @click="returnBackFn">回应</a>
</p>
</template>
<script>
export default {
  props: {
    value: String
  },
  methods: {
    returnBackFn() {
      this.$emit('input', '还你200块');
    }
  }
}
</script>

Let’s summarize:

If you are lazy and don't want to handle events yourself, then use the default 'value' && 'input' events. If you use native events, even the model attribute can be omitted.

If you want your code to be clearer and distinguish custom events, then the following combination is your cup of tea.

It depends on your own mood to define prop and event. Of course, you need to know your opinion [try to avoid keywords]

model: {
prop: 'someProp', // 注意，是prop，不带s。我在写这个速记的时候，多写了一个s，调试到怀疑人生
event: 'someEvent'
}
this.$emit('someProp', [returnValueToParent])

I believe you have mastered the method after reading the case in this article. Please pay attention for more exciting things. Other related articles on php Chinese website!

Recommended reading:

vue uses custom icon icon step analysis

Use Mockjs step analysis in vue-cli project

The above is the detailed content of Detailed explanation of the steps of using v-model in custom components in vue. For more information, please follow other related articles on the PHP Chinese website!