组件上使用v-model

Posted 2021-02-05 guangzan

组件上使用v-model

<input v-model="searchText">

等价于

<input
  v-bind:value="searchText"
  v-on:input="searchText = $event.target.value"
>

当用在组件上时，v-model 则会这样：

<custom-input v-model="searchText"></custom-input>

等同于

<custom-input
  v-bind:value="searchText"
  v-on:input="searchText = $event"
></custom-input>

为了让它正常工作，这个组件内的 <input> 必须：

• 将其 value 特性绑定到一个名叫 value 的 prop 上
• 在其 input 事件被触发时，将新的值通过自定义的 input 事件抛出

Vue.component('custom-input', {
  props: ['value'],
  template: `
    <input
      v-bind:value="value"
      v-on:input="$emit('input', $event.target.value)"
    >
  `
})

现在 v-model 就应该可以在这个组件上完美地工作起来了：

<custom-input v-model="searchText"></custom-input>

示例

父组件App.vue中

<template>
  <div id="app">
    <Model v-model="searchText"></Model>
    <span>{{searchText}}</span>
    <!-- 等价于
    <custom-input 
        v-bind:value="searchText" 
        @input="searchText = $event"
    ></custom-input> -->
  </div>
</template>
<script>
import Model from "./components/Model";

export default {
  name: "App",
  data: function() {
    return {
      searchText:''
    };
  },
  components: {
    Model
  }
};
</script>

子组件model.vue中

<template>
  <div id="app">
    <input v-bind:value="value" @input="$emit('input', $event.target.value)">
  </div>
</template>
<script>
export default {
  props: ["value"],

};
</script>

过程：

输入文字-->
:vlue=‘search‘ 传给子组件-->
子组件props接收-->
子组件:value=‘value‘-->
子组件绑定input通过$emit传给父组件-->
父组件@input=‘searchText = $event‘接收