v-model使用方法

1.v-model 可以被用在自定义组件上吗?如果可以,如何使用?

可以。v-model 实际上是一个语法糖,如:

 <input v-model="searchText">

实际上相当于:

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

用在自定义组件上也是同理:

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

相当于

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

显然,custom-input 与父组件的交互如下: 1 父组件将 searchText 变量传入custom-input 组件,使用的 prop 名为 value ; 2 custom-input 组件向父组件传出名为 input 的事件,父组件将接收到的值赋值给 searchText ; 所以,custom-input 组件的实现应该类似于这样:

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

猜你喜欢

转载自blog.csdn.net/weixin_71171795/article/details/128550681
今日推荐