【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前端后端，以及移動跨平台開發