【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>

---

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

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

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