【Vue.js】简单说下vuejs中v-model自定义使用姿势

vue.js中有个v-model的语法，可以实现双向绑定。

起初刚看到的时候，觉得很神奇。后面随着对vue.js的熟悉。发现这个其实是vue官方给我们实现的一个语法糖。

使用v-model的时候，vue会绑定组件的value属性，在自定义组件上使用v-model，然后浏览器审查元素，就会发现组件上做了一个vue属性。

如果在组件做出修改的话，就可以直接发射一个input的事件，把对应的值弹出到外面，就实现了双向绑定

v-model用不用input这个标签其实都无所谓

父组件

<template>

  <div id="app">

    <HelloWorld v-model="msg" />

    <h1 style="color:green">{{msg}}</h1>

    <button @click="test()">ok</button>

  </div>

</template>

<script>

import HelloWorld from "./components/HelloWorld.vue";

export default {

  name: "app",

  components: {

    HelloWorld

  },

  data() {

    return {

      msg: 2

    };

  },

  methods: {

    test() {

      this.msg -= 1;

    }

  }

};

</script>

子组件

<template>

  <div class="hello">

    <h1 v-bind:title="value" @click="close()">{{ value }}</h1>

  </div>

</template>

<script>

export default {

  name: "HelloWorld",

  props: {

    value: Number

  },

  data() {

    return {

    };

  },

  methods: {

    close() {

      this.num+=1;

      this.$emit("input", this.value+1);

    }

  }

};

</script>

巴特西

【Vue.js】简单说下vuejs中v-model自定义使用姿势

欢迎大家关注我的微信公众号：web开发仔，

本公众号的宗旨是以最简短的文字，分享一些关键的web开发技术

技术范围包括web前端后端，以及移动跨平台开发

最新文章

热门文章