Home > Web Front-end > JS Tutorial > body text

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

php中世界最好的语言
Release: 2018-05-29 17:55:17
Original
1708 people have browsed it

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>
Copy after login
<!-- 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>
Copy after login
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>
Copy after login
<!-- 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>
Copy after login
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>
Copy after login

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])
Copy after login
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!

Related labels:
source:php.cn
Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template
About us Disclaimer Sitemap
php.cn:Public welfare online PHP training,Help PHP learners grow quickly!