码迷,mamicode.com
首页 > 其他好文 > 详细

组件上使用v-model

时间:2019-01-22 17:32:10      阅读:223      评论:0      收藏:0      [点我收藏+]

标签:div   input   完美   code   rip   vue   现在   pre   exp   

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

组件上使用v-model

标签:div   input   完美   code   rip   vue   现在   pre   exp   

原文地址:https://www.cnblogs.com/guangzan/p/10304552.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!