79. 自定义组件使用 v-model && 动态指令参数

v-model 是 v-bind 以及 v-on 配合使用的语法糖,以下的两者的实现是一致的:



一个组件上的 v-model 默认会利用名为 value 的 prop 和名为 input 的事件,但是像单选框、复选框等类型的输入控件可能会将 value attribute 用于不同的目的。

其中 v-model 在内部为不同的输入元素使用不同的 property 并抛出不同的事件:

text 和 textarea 元素使用 value property 和 input 事件
checkbox 和 radio 使用 checked property 和 change 事件
select 字段将 value 作为 prop 并将 change 作为事件

forexample

{{lovingVue}}
Vue.component('base-checkbox', { model: { prop: 'checked', event: 'change' }, props: { checked: Boolean }, template: ` ` }) new Vue({ el:"#app", data: { lovingVue: '' } });

这里的 lovingVue 的值将会传入这个名为 checked 的 prop。同时当 触发一个 change 事件并附带一个新的值的时候,这个 lovingVue 的 property 将会被更新。

  1. 动态的绑定指令参数
    可以动态的将指令参数传递给组件。假设你有一个组件 ,有时候你需要绑定一个点击事件 click,有时候需要绑定一个双击事件 dblclick,这个时候你可以这么写



来源:https://www.jianshu.com/p/1344f755447a

你可能感兴趣的:(79. 自定义组件使用 v-model && 动态指令参数)