render函数实现双向绑定

发表于 | 分类于 | | 阅读次数:
字数统计: 125 字 | 阅读时长 ≈ 1 分钟

render函数实现双向绑定

举例

render函数渲染iview表格列中的InputNumber，实现双向绑定

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
render: (h, params) => {
  let downLimitInput;
  downLimitInput = h('InputNumber', {
    props: {
      value: this.downLimitArr[params.index],
      'active-change': false	// 延迟更新
    },
    on: {
      'on-change': data => {
        this.downLimitArr.splice(params.index, 1, data);
      }
    }
  });

  return h('div', {}, [downLimitInput]);
}
1
2
3
data() {
  downLimitArr: [20, 50, 100]
}

扩展

事实上Vue官网上有对于v-model的说明，

1
<input v-model="searchText">

等价于

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