Vue 在组件上使用v-model

Vue 的组件系统允许创建具有完全自定义行为且可服用的输入组件，这些输入组件可以和v-model一起使用。

官方文档

<input v-model="searchText">

等价于：

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

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

<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)"
    >
  `
})

看起来似乎不太好理解，我们换一种写法：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div id="app">
    <!-- 双向绑定 searchText -->
    <p>msg:{{searchText}}</p>
    <!-- 向子组件custom-input中传入一个value值 @input用来响应子组件的emit事件-->
    <custom-input 
        v-bind:value="searchText"
        @input="searchText = $event">
    </custom-input>
</div>
<script src="js/vue.js"></script>
<script>

    Vue.component('custom-input', {
       // 子组件通过props接收value值 然后绑定至input的value上
        props: ['value'],
        template: `<input :value="value" @input="handleInput">`,
        methods: {
            //  input输入框的input事件
            handleInput(event) {
                var value = event.target.value;
                this.$emit('input', value)  // 通过emit事件讲输入框的值上传至父组件
            }
        }
    })
    
    var app = new Vue({
        el: '#app',
        data: {
            searchText: ''
        }
        
    })
</script>
</body>
</html>

然后将<custom-input ></custom-input>改写：

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

Vue 在组件上使用v-model

猜你喜欢