zoukankan      html  css  js  c++  java
  • Vue学习笔记-深入组件(自定义事件)

    事件名:始终使用 kebab-case 的事件名


    不同于组件和 prop,事件名不存在任何自动化的大小写转换。而是触发的事件名需要完全匹配监听这个事件所用的名称

    不同于组件和 prop,事件名不会被用作一个 JavaScript 变量名或属性名,所以就没有理由使用 camelCase 或 PascalCase 了。

    并且 v-on 事件监听器在 DOM 模板中会被自动转换为全小写 (因为 HTML 是大小写不敏感的),

    所以 v-on:myEvent 将会变成 v-on:myevent——导致 myEvent 不可能被监听到。

    自定义组件的 v-model:model选项设置绑定的prop和事件

    v-model本身就是要处理!


     

    将原生事件绑定到组件(组件内处理:$listeners  .native)


     

     为了解决这个问题,Vue 提供了一个 $listeners 属性,它是一个对象,里面包含了作用在这个组件上的所有监听器

     有了这个 $listeners 属性,你就可以配合 v-on="$listeners" 将所有的事件监听器指向这个组件的某个特定的子元素

    Vue.component('base-input', {
      inheritAttrs: false,
      props: ['label', 'value'],
      computed: {
        inputListeners: function () {
          var vm = this
          // `Object.assign` 将所有的对象合并为一个新对象
          return Object.assign({},
            // 我们从父级添加所有的监听器
            this.$listeners,
            // 然后我们添加自定义监听器,
            // 或覆写一些监听器的行为
            {
              // 这里确保组件配合 `v-model` 的工作
              input: function (event) {
                vm.$emit('input', event.target.value)
              }
            }
          )
        }
      },
      template: `
        <label>
          {{ label }}
          <input
            v-bind="$attrs"
            v-bind:value="value"
            v-on="inputListeners"
          >
        </label>
      `
    })

    自定义组件的 v-model


    一个组件上的 v-model 默认会利用名为 value 的 prop 和名为 input 的事件,

    但是像单选框、复选框等类型的输入控件可能会将 value 特性用于不同的目的。

    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>

    注意你仍然需要在组件的 props 选项里声明 checked 这个 prop。

    .sync 修饰符:2.3.0+ 新增,

    单个属性/多个属性:做了很多事情:v-bind:title.sync


     

    在有些情况下,我们可能需要对一个 prop 进行“双向绑定”。不幸的是,真正的双向绑定会带来维护上的问题,因为子组件可以修改父组件,且在父组件和子组件都没有明显的改动来源

    这也是为什么我们推荐以 update:myPropName 的模式触发事件取而代之。

    this.$emit('update:title', newTitle)//子组件发送,为了配合sync,必须用update:title,"值"这种格式
    //父组件接受
    <text-document
      v-bind:title="doc.title"
      v-on:update:title="doc.title = $event"
    ></text-document>
    
    为了方便起见,我们为这种模式提供一个缩写,即 .sync 修饰符<text-document v-bind:title.sync="doc.title"></text-document>
    this.$emit('update:title', newTitle)//子组件发送,为了配合sync,必须用update:title,"值"这种格式






     当我们用一个对象同时设置多个 prop 的时候,也可以将这个 .sync 修饰符和 v-bind 配合使用:

    <text-document v-bind.sync="doc"></text-document>
    组件内:像下面这样写,这样父元素就能自动监听元素

    这样会把 doc 对象中的每一个属性 (如 title) 都作为一个独立的 prop 传进去,然后各自添加用于更新的 v-on 监听器

     

  • 相关阅读:
    将vue文件script代码抽取到单独的js文件
    git pull 提示错误:Your local changes to the following files would be overwritten by merge
    vue和uniapp 配置项目基础路径
    XAMPP Access forbidden! Access to the requested directory is only available from the local network.
    postman与newman集成
    postman生成代码段
    Curl命令
    POST方法的Content-type类型
    Selenium Grid 并行的Web测试
    pytorch转ONNX以及TnesorRT的坑
  • 原文地址:https://www.cnblogs.com/liuguiqian/p/11023621.html
Copyright © 2011-2022 走看看