Eighteen Blog

最近学习vue,从最基础的文档看起。到目前基础已经看完。有两个问题很迷茫。

  1. vue的动态参数(2.6新增)。demo一直报错。分析原因是因为vue不允许动态添加根一级的变量。(不理解)
  2. 组件中v-model的使用文档中说的让我有点绕。不过已经顺过来了,所以来分享一下。

官方给出的例子是这样。(可以直接使用)

1
2
3
4
5
6
7
8
9
10
11
12
13
14
HTML:

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

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

v-model可以改写为这种形式,两者完全等价。

1
2
3
4
5
6
7
<input v-model="searchText">

等价于:

<input
v-bind:value="searchText"
v-on:input="searchText = $event.target.value"> //( $event.target.value为事件当前目标上的value值。)

第二种写法:

  1. 在input上绑定了input事件,通过触发input事件,执行给searchText赋值语句。
  2. v-bind将searchText赋值给input标签的value属性。

再看官方的例子:

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

等价于:

1
2
3
4
<custom-input  
v-bind:value="searchText"
v-on:input="searchText = $event" //$event 为组件内部抛出来的值。(这个如果不明白可以看组件的自定义事件部分)
></custom-input>

再加上官方的js写法:

1
2
3
4
5
6
7
8
9
Vue.component('custom-input', {
props: ['value'],
template: `
<input
v-bind:value="value"
v-on:input="$emit('input', $event.target.value)"
>
`
})
  1. 我们在组件内的input上监听了input事件,并且用该input事件对组件上的(自定义)input事件进行触发(searchText = $event”);
  2. 将$ event.target.value作为参数传给 v-on:input=”searchText = $ event “,$ event === $ event.target.value。执行语句searchText被赋值。
  3. 组件上的v-bind:value = “searchText” 是将searchText的值绑定到组件内部的props里的value上。
  4. 组件内部将props中的value 绑定到input的value上。就这样完成了一次双向绑定。

而根据官方v-model的两种写法,组件上转换回v-modal的写法。就完成了。最终结果就如开头所示。

 评论