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

最新推荐文章于 2024-06-25 10:31:59 发布

Model_Vincent

最新推荐文章于 2024-06-25 10:31:59 发布

阅读量547

点赞数

分类专栏： Vue 文章标签： vue

本文链接：https://blog.csdn.net/Model_Vincent/article/details/84099993

版权

Vue 专栏收录该内容

8 篇文章 0 订阅

订阅专栏

组件绑定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>