Vue自定义属性实例分析


Posted in Javascript onFebruary 23, 2019

本文实例讲述了Vue自定义属性。分享给大家供大家参考,具体如下:

1 事件名

跟组件和 prop 不同,事件名不存在任何自动化的大小写转换。而是触发的事件名需要完全匹配监听这个事件所用的名称。举个例子,如果触发一个 camelCase 名字的事件:

this.$emit('myEvent')

则监听这个名字的 kebab-case 版本是不会有任何效果的:

<my-component v-on:my-event="doSomething"></my-component>

跟组件和 prop 不同,事件名不会被用作一个 JavaScript 变量名或属性名,所以就没有理由使用 camelCase 或 PascalCase 了。并且 v-on 事件监听器在 DOM 模板中会被自动转换为全小写 (因为 HTML 是大小写不敏感的),所以 v-on:myEvent 将会变成 v-on:myevent——导致 myEvent 不可能被监听到。

因此,我们推荐你始终使用 kebab-case 的事件名。

2 自定义组件的 v-model

2.2.0+ 新增

一个组件上的 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)"
      >
      `
});

现在在这个组件上使用 v-model 的时候:

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

这里的 loving 的值将会传入这个名为 checkedprop。同时当 <base-checkbox> 触发一个 change 事件并附带一个新的值的时候,这个 loving 的属性将会被更新。

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

3 将原生事件绑定到组件

你可能有很多次想要在一个组件的根元素上直接监听一个原生事件。这时,你可以使用 v-on.native 修饰符:

<base-input v-on:focus.native="onFocus"></base-input>

在有的时候这是很有用的,不过在你尝试监听一个类似 <input> 的非常特定的元素时,这并不是个好主意。比如上述<base-input>组件可能做了如下重构,所以根元素实际上是一个 <label> 元素:

<label>
  {{ label }}
  <input
      v-bind=$attrs",
      v-bind:value="value"
      v-on:input="$emit('input',$event.target.value)"
      >
</label>

这时,父级的 .native 监听器将静默失败。它不会产生任何报错,但是 onFocus 处理函数不会如你预期地被调用。

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

{
 focus: function (event) { /* ... */ }
 input: function (value) { /* ... */ },
}

有了这个 $listeners 属性,你就可以配合 v-on="$listeners" 将所有的事件监听器指向这个组件的某个特定的子元素。对于类似 <input> 的你希望它也可以配合 v-model 工作的组件来说,为这些监听器创建一个类似下述inputListeners 的计算属性通常是非常有用的:

Vue.component('base-input', {
  inheritAttrs: false,
  props: ['label', 'value'],
  computed: {
    inputListeners: function () {
      var vm = this;
      //Object.assign() 会将所有的对象合并为一个新对象
      return Object.assign({},
          //从父级添加所有的监听器
          this.$listeners,
          //添加自定义监听器或复写监听器行为
          {
            input: function (event) {
              vm.$emit('input', event.target.value);
            }
          }
      )
    }
  },
  template: `
    <label>
      {{ label }}
      <input
        v-bind="$attrs"
        v-bind:value="value"
        v-on="inputListeners"
      >
    </label>
  `
});

现在 <base-input> 组件是一个完全透明的包裹器了,也就是说它可以完全像一个普通的 <input> 元素一样使用了:所有跟它相同的特性和监听器的都可以工作。

4 .sync 修饰符

2.3.0+ 新增

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

这也是为什么我们推荐以 update:my-prop-name 的模式触发事件取而代之。举个例子,在一个包含 title prop 的假设的组件中,我们可以用以下方法表达对其赋新值的意图:

this.$emit('update:title', newTitle)

然后父组件可以监听那个事件并根据需要更新一个本地的数据属性。例如:

<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>

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

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

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

v-bind.sync 用在一个字面量的对象上,例如v-bind.sync=”{ title: doc.title }”,是无法正常工作的,因为在解析一个像这样的复杂表达式的时候,有很多边缘情况需要考虑。

希望本文所述对大家vue.js程序设计有所帮助。

Javascript 相关文章推荐
JavaScript中document.forms[0]与getElementByName区别
Jan 21 Javascript
JQuery报错Uncaught TypeError: Illegal invocation的处理方法
Mar 13 Javascript
arguments对象验证函数的参数是否合法
Jun 26 Javascript
javascript特殊文本输入框网页特效
Sep 13 Javascript
AngularJS前端页面操作之用户修改密码功能示例
Mar 27 Javascript
angular directive的简单使用总结
May 24 Javascript
Bootstrap模态框插入视频的实现代码
Jun 25 Javascript
BootStrap Fileinput上传插件使用实例代码
Jul 28 Javascript
JavaScript寄生组合式继承实例详解
Jan 06 Javascript
Angular PWA使用的Demo示例
Jan 31 Javascript
JS实现字体背景跑马灯
Jan 06 Javascript
JavaScript异步操作中串行和并行
Nov 20 Javascript
Vue动态组件与异步组件实例详解
Feb 23 #Javascript
详解单页面路由工程使用微信分享及二次分享解决方案
Feb 22 #Javascript
详解关于Vuex的action传入多个参数的问题
Feb 22 #Javascript
Vue.js实现开发购物车功能的方法详解
Feb 22 #Javascript
vue组件之间通信方式实例总结【8种方式】
Feb 22 #Javascript
vue2.0中set添加属性后视图不能更新的解决办法
Feb 22 #Javascript
浅谈Node框架接入ELK实践总结
Feb 22 #Javascript
You might like
c#中的实现php中的preg_replace
2009/12/21 PHP
php 上传文件类型判断函数(避免上传漏洞 )
2010/06/08 PHP
php数组函数array_key_exists()小结
2015/12/10 PHP
ThinkPHP模板Volist标签嵌套循环输出多维数组的方法
2016/03/23 PHP
php 访问oracle 存储过程实例详解
2017/01/08 PHP
thinkPHP框架动态配置用法实例分析
2018/06/14 PHP
js 单引号 传递方法
2009/06/22 Javascript
写了10年的Javascript也未必全了解的连续赋值运算
2011/03/25 Javascript
jquery中交替点击事件toggle方法的使用示例
2013/12/08 Javascript
Jquery实现的一种常用高亮效果示例代码
2014/01/28 Javascript
Javascript 中创建自定义对象的方法汇总
2014/12/04 Javascript
JavaScript编写推箱子游戏
2015/07/07 Javascript
jquery.fastLiveFilter.js实现输入自动过滤的方法
2015/08/11 Javascript
JavaScript中的this关键字使用详解
2015/08/14 Javascript
全面解析Bootstrap表单使用方法(表单样式)
2015/11/24 Javascript
Bootstrap的modal拖动效果
2016/12/25 Javascript
详谈js中数组(array)和对象(object)的区别
2017/02/27 Javascript
基于AngularJS实现的工资计算器实例
2017/06/16 Javascript
vue.js将时间戳转化为日期格式的实现代码
2018/06/05 Javascript
vue-cli3项目展示本地Markdown文件的方法
2019/06/07 Javascript
vue中nextTick用法实例
2019/09/11 Javascript
ElementUI Tree 树形控件的使用并给节点添加图标
2020/02/27 Javascript
vue 监听窗口变化对页面部分元素重新渲染操作
2020/07/28 Javascript
如何在JavaScript中正确处理变量
2020/12/25 Javascript
[02:19]DOTA选手解说齐贺岁
2018/02/11 DOTA
[01:32:50]DOTA2-DPC中国联赛 正赛 DLG vs XG BO3 第一场 1月25日
2021/03/11 DOTA
Python中的__SLOTS__属性使用示例
2015/02/18 Python
关于Keras Dense层整理
2020/05/21 Python
英国女鞋购物网站:Moda in Pelle
2019/02/18 全球购物
欧姆龙医疗欧洲有限公司:Omron Healthcare Europe B.V
2020/06/13 全球购物
Linux不知道文件后缀名怎么判断文件类型
2012/04/26 面试题
工程造价专业大学生自荐信
2013/10/01 职场文书
机电一体化应届生求职信范文
2014/01/24 职场文书
员工安全生产承诺书
2014/05/22 职场文书
2015小学教育教学工作总结
2015/07/21 职场文书
python数字图像处理实现图像的形变与缩放
2022/06/28 Python