自定义组件使用v-model示例

示例

?

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23

<template>   <div class="custom-input">     <span>我的输入框：</span>     <input type="text" :value="value" @input="valueChanged">   </div> </template>   <script> export default {   props: {     value: {       type: String,       default: ""     }   },   created() {},   methods: {     valueChanged(e) {       this.$emit("input", e.target.value);     }   } }; </script>

父组件可以直接调用：

?

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22

<template>   <div>     <custom-input v-model="inputvalue"></custom-input>     <span>{{inputvalue}}</span>   </div> </template>   <script> import CustomInput from "./components/custom-input.vue";   export default {   name: "App",   components: {     CustomInput   },   data: function() {     return {       inputvalue: "A"     };   } }; </script>

当custom-input 的输入框的值变化的时候，可以看到父组件的inputvalue 的值跟着变化了。

这就是自定义组件中v-model最简单的使用。

 

只需要记住：一个组件上的 v-model 默认会利用名为 value 的 prop 和名为input 的事件。