专栏首页前端之攻略Vue.js-自定义事件例子 原

Vue.js-自定义事件例子 原

自定义组件的 v-model

2.2.0+ 新增

一个组件上的 v-model 默认会利用名为 value 的 prop 和名为 input 的事件,但是像单选框、复选框等类型的输入控件可能会将 value 特性用于不同的目的。model 选项可以用来避免这样的冲突:

<body class="">
    <div id="app-7">
      <base-checkbox v-model="lovingVue"></base-checkbox>
    </div>
    <script src="js/vue.min.js"></script>
    <script>
    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)"/>
	  `
	})
    var app7 = new Vue({
	    el: '#app-7',
	    data:{
		   lovingVue:true
		}
        
    })
	//正常情况下v-model="lovingVue"   是v-bind:value="lovingVue" 与 v-on:input="lovingVue=$event.target.value" 的语法糖,这种默认的情况在type="checkbox" 是不合适的,我们需要在组件中的model对象中指定event事件类型与prop为checked
	//复选框一般只有一个属性checked,指选中或者不选中,向子组件传递也只要传递这个属性
    </script>
</body>

将原生事件绑定到组件

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

<body class="">
    <div id="app" class="demo">
        <base-input v-on:focus.native="onFocus" label="标识" placeholder="请输入信息"></base-input>
    </div>
    <script src="js/vue-2.5.13.js"></script>
    <script>
    Vue.component('base-input', {
        inheritAttrs: false,
        props: ["label"],
        template: `
      <label>
          {{label}}
          {{$attrs.placeholder}}
          {{$attrs["data-date-picker"]}}
          <input v-bind="$attrs"/>
        </label>
  `
    })
    var app = new Vue({
        el: "#app",
        data: {

        },
        methods: {
            onFocus: function() {
                console.log("focused")
            }
        }
    })
    //v-on:focus.native="onFocus" 只作用在input上有效,此例中根元素是label,所以原生onFocus事件不起作用
    //若要执行onFocus事件,模板的根元素修改成input template:` <input v-bind="$attrs"/>`
    </script>

渲染为 

<div id="app" class="demo">
   <label>
     标识
     请输入信息
   <input placeholder="请输入信息"></label>
</div>

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

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

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

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

完整例子

<body class="">
    <div id="app" class="demo">
        <base-input v-on:focus="onFocus" v-model="idata" label="标识" placeholder="please enter"></base-input>
        <div>{{idata}}</div>
    </div>
    <script src="js/vue-2.5.13.js"></script>
    <script>
    Vue.component('base-input', {
        inheritAttrs: false,
        props: ['label', 'value'],
        computed: {
            inputListeners: function() {
                var vm = this
                console.log(this.$listeners)
                // `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>
  `
    })
    var app = new Vue({
        el: "#app",
        data: {
            idata: "hi"
        },
        methods: {
            onFocus: function() {
                console.log("focused")
            }
        }
    })
   
    </script>
</body>

Object.assign() 方法用于将所有可枚举属性的值从一个或多个源对象复制到目标对象。它将返回目标对象。 语法:Object.assign(target, ...sources) this.$listeners {    focus: function (event) { /* ... */ }    input: function (value) { /* ... */ },  } $listeners 继承父级的所有事件,例子中的focus和input,其中的input是隐含在v-model中(在父级中v-model="idata" 是 v-bind:value="idata" 与 v-on:input="idata=$event"的语法糖,其中$event是子组件抛出的值event.target.value)

(adsbygoogle = window.adsbygoogle || []).push({});

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • CentOS 7 中使用NTP进行时间同步 原

    1. NTP时钟同步方式说明 NTP在linux下有两种时钟同步方式,分别为直接同步和平滑同步:  直接同步  使用ntpdate命令进行同步,直接进行时...

    拓荒者
  • Exchange 2013信息权限保护之Exchange集成RMS

    完成了AD RMS的部署后,下面就需要让Exchange 2013来集成RMS了。首先我们需要了解,Exchange IRM的工作方式,Exchange是调用R...

    李珣
  • 小结ES6基本知识点(五):对象的扩展

    ES6初学者,通过阅读本文可对ES6知识点有个大体的概念,强烈建议阅读阮一峰大大的ES6入门

    前端林子
  • FreeHttp1.1升级说明

    无论GET http://www.fiddler2.com/UpdateCheck.aspx?isBeta=False HTTP/1.1 或 GET /Upda...

    lulianqi
  • 代码段

    但很多时候我们需要使用通知OnPropertyChanged,这时在 VisualStudio 就没有写好的,如果是写属性,这样每个都来增加一句OnProper...

    林德熙
  • tf.InteractiveSession()与tf.Session()

    tf.InteractiveSession():它能让你在运行图的时候,插入一些计算图,这些计算图是由某些操作(operations)构成的。这对于工作在交互式...

    周小董
  • Object.assign方法不能实现深复制

    Object.assign方法用于对象的合并,将源对象(source)的所有可枚举属性,复制到目标对象(target),类似这样:

    yuezhongbao
  • 简记siteserver远程模板下载Getshell漏洞

    小明同学在某个神清气朗的周六接到来自上级的应急任务,本次任务详情为对某个网站黑链安全攻击事件进行溯源,找到攻击路径,找出幕后真凶,然而,一场意外的事情才刚刚开始...

    FB客服
  • SQL注入漏洞全接触--高级篇

    看完入门篇和进阶篇后,稍加练习,破解一般的网站是没问题了。但如果碰到表名列名猜不到,或程序作者过滤了一些特殊字符,怎么提高注入的成功率?怎么样提高猜解效率?请大...

    徐大嘴

扫码关注云+社区

领取腾讯云代金券