How to operate vue to enable v-model in a custom component

This time I will bring you how to operate vue to enable v-model in a custom component, and how to operate vue to enable v-model in a custom componentNotes What are they? Here are actual cases. 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:

How to use WebPack to configure vue multi-page

How to use webpack to build a react development environment

The above is the detailed content of How to operate vue to enable v-model in a custom component. For more information, please follow other related articles on the PHP Chinese website!