组件上使用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>

过程：

1.输入文字

2.:value='search' 传给子组件

3.子组件props接收

4.子组件:value='value'

5.子组件绑定input通过$emit传给父组件

6.父组件@input='searchText = $event'接收

巴特西

组件上使用v-model

组件上使用v-model

示例

最新文章

热门文章