Vue学习笔记----组件事件

组件绑定v-model实现数据的更新

Vue.component('base-checkbox', {
  model: {
    prop: 'checked',
    event: 'change'
  },
  props: {
    checked: Boolean
  },
  template: `
    <input
      type="checkbox"
      v-bind:checked="checked"
      v-on:change="$emit('change', $event.target.checked)"
    >
  `
})

<base-checkbox v-model="lovingVue"></base-checkbox>

loginVue即为data中的属性,它将传入组件的prop的checked
loginVue = checked,组件中使用v-bind绑定checked,当输入框的值发生改变时,触发change事件
这里使用$emit(event,value)绑定事件函数

组件绑定原生事件

sync修饰符实现双向绑定

<text-document v-bind.sync="doc"></text-document>

<text-document
  v-bind:title="doc.title"
  v-on:update:title="doc.title = $event"
></text-document>
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值