精华内容
下载资源
问答
  • Vue自定义事件(详解)

    2020-12-10 19:54:33
    本文将详细介绍Vue自定义事件 事件绑定 每个 Vue 实例都实现了事件接口 (Events interface),即 使用 $on(eventName) 监听事件 使用 $emit(eventName) 触发事件 [注意]Vue 的事件系统分离自浏览器的EventTarget API...
  • Vue自定义事件

    千次阅读 2019-06-25 20:26:57
    这时,Vue自定义事件就派上用场了。 1、自定义事件 每个Vue创建的实例都会出现一个事件接口 var vm = new Vue({ el: '#app' }) 自定义事件的定义(发布) //vm.$on(自定义事件的名称,自定义事件的事件处理...

    父组件使用props传递数据给子组件,子组件怎么跟父组件通信呢?这时,Vue的自定义事件就派上用场了。

    1、自定义事件

    每个Vue创建的实例都会出现一个事件接口

     var vm = new Vue({
        el: '#app'
      })
    
    • 自定义事件的定义(发布)
     //vm.$on(自定义事件的名称,自定义事件的事件处理程序)
     vm.$on( 'aa', function () {
        console.log( 'aa' )
      })
      
    
    • //自定义事件的触发 ( 订阅 )
     // vm.$emit( 自定义事件的名称,自定义事件处理程序需要的参数1,参数2,参数3)
    
        vm.$emit( 'aa' )
    

    2、自定义事件的数据传递

    我们通过下面代码分析一下自定义事件的数据传递

    <body>
       <div id="app">
          <Father></Father>
       </div>
    
       <template id="father">
          <div>
             <h3>这里是父组件</h3>
             <p>儿子给我{{ money}} </p>
             <Son @hongbao="givemoney"></Son>
          </div>
    
       </template>
    
       <template id="son">
          <div>
             <h3>这里是子组件</h3>
             <button @click="give">给父亲红包</button>
          </div>
       </template>
    </body>
    
    <script>
       Vue.component('Father',{
          template:'#father',
          data(){
             return {
                money:0,
             }
          },
          methods:{
              //自定义事件的定义(发布)
             givemoney(val){
                this.money=val;
             }
          }
    
       });
    
       Vue.component('Son',{
          template:'#son',
          data(){
            return {
               money:3000,
            }
          },
          methods:{
             //自定义事件的触发 ( 订阅 )
             give(){
                console.log(this.money)
                this.$emit('hongbao',this.money)
             }
          }
       })
    
       new Vue({
    
       }).$mount('#app')
    
    

    从上述代码可以看出,父组件通过$on监听事件,事件处理函数的参数则为接收的数据

     methods:{
              //自定义事件的定义(发布)
             givemoney(val){
                this.money=val;
             }
          }
    

    子组件通过$emit可以触发事件,第一个参数为要触发的事件,第二个事件为要传递的数据

      methods:{
             //自定义事件的触发 ( 订阅 )
             give(){
                console.log(this.money)
                this.$emit('hongbao',this.money)
             }
          }
    
    展开全文
  • vue 自定义事件传参

    千次阅读 2020-02-29 00:03:05
    先来简单看个例子: TodoList.vue : <template> <ul> <li> <todo-item v-for="item in list" :key="item.id" :status="doneList.includes(item.id)" :info="item" ...

    先来简单看个例子:

    TodoList.vue :

    <template>
      <ul>
        <li>
          <todo-item
            v-for="item in list" :key="item.id"
            :status="doneList.includes(item.id)"
            :info="item"
            @click="changeStatus0"
          ></todo-item>
        </li>
        <li>
          <todo-item
            v-for="item in list" :key="item.id"
            :status="doneList.includes(item.id)"
            :info="item"
            @click="changeStatus1()"
          ></todo-item>
        </li>
        <li>
          <todo-item
            v-for="item in list" :key="item.id"
            :status="doneList.includes(item.id)"
            :info="item"
            @click="changeStatus2(item)"
          ></todo-item>
        </li>
        <li>
          <todo-item
            v-for="item in list" :key="item.id"
            :status="doneList.includes(item.id)"
            :info="item"
            @click="changeStatus3(arguments, item)"
          ></todo-item>
        </li>
      </ul>
    </template>
    
    <script>
    import TodoItem from './TodoItem'
    export default {
      name: 'TodoList',
      components: {
        TodoItem
      },
      data () {
        return {
          list: [
            {
              id: 0,
              name: 'zero',
              desc: 'zerozerozero'
            },
            {
              id: 1,
              name: 'one',
              desc: 'oneoneone'
            },
            {
              id: 2,
              name: 'two',
              desc: 'twotwotwo'
            }
          ],
          doneList: [1]
        }
      },
      methods: {
        changeStatus0 (val, obj) {
          console.log(val)
          console.log(obj)
        },
        changeStatus1 (val) {
          console.log(val)
        },
        changeStatus2 (obj) {
          console.log(obj)
        },
        changeStatus3 (arr, obj) {
          console.log(arr)
          const val = arr[0]
          if (val) {
            const index = this.doneList.indexOf(obj.id)
            this.doneList.splice(index, 1)
          } else {
            this.doneList.push(obj.id)
          }
        }
      }
    }
    </script>
    
    

    TodoItem.vue :

    <template>
      <label @click="changeStatus">
        <span>{{ info.name }}: {{ status }}</span>
      </label>
    </template>
    
    <script>
    export default {
      name: 'TodoItem',
      props: {
        status: {
          type: Boolean,
          default: false
        },
        info: {
          type: Object,
          default () {
            return {}
          }
        }
      },
      methods: {
        changeStatus () {
          this.$emit('click', this.status, this.info)
        }
      }
    }
    </script>
    
    
    1. changeStatus0 打印的是TodoItem.vue中 $emit 后跟的两个参数。
    2. changeStatus1 打印的是 undefined
    3. changeStatus2 打印的是 v-for 循环中的当前 item 对象。
    4. changeStatus3arr 参数对应 $emit 后跟的两个参数,item 参数对应 v-for 循环中的当前 item 对象,注意 template 中的写法 @click="changeStatus3(arguments, item)",按照 changeStatus3 的方式可以实现多种方式的混合传参。
    展开全文
  • Vue 中,对HTML的原生事件做了支持。例如:click、focus、change等事件。除了原生事件外,Vue 还允许用户自定义事件。 什么是事件?什么是自定义事件? 在了解自定义事件前,先来了解什么是事件。

    前言

    在Vue 中,对HTML的原生事件做了支持。例如:clickfocuschange等事件。除了原生事件外,Vue 还允许用户自定义事件。

    什么是事件?什么是自定义事件?

    在了解自定义事件前,先来了解什么是事件。

    事件就是用户对窗口上各种组件的操作。
    使用事件机制可以实现:当类对象的某个状态发生变化时,系统将会通过某种途径调用类中的有关处理这个事件的方法或者触发控件事件的对象就会调用该控件所有已注册的事件处理程序等。

    来自百度百科—— 事件 (计算机术语)

    事件是指被程序发现的行为或发生的事情,而且它可能会被程序处理。

    来自 CSDN AndyNikolas ——在 JavaScript 中, 究竟什么是 事件,事件 是指什么?

    从上面两段引用大致可以看出:计算机的事件是组件状态发生了变化,触发了对应的处理程序

    本质上就是:计算机监听某件事(Event),只要这件事发生了,就执行特定的操作。细分下来,事件(Event)分为三部分:

    1. 声明需要监听的事件
    2. 设置事件触发后的要执行的代码
    3. 触发监听事件

    在实际开发中,第一点和第二点往往是一并设置。也就是说,如果要设置一个事件,需要做两件事情:

    1. 添加事件(包括声明事件、设置执行代码)
    2. 触发事件

    Vue 如何添加自定义事件

    上面说到计算机的事件由两部分组成:添加事件、触发事件。在Vue 想要添加自定义事件也是如此。

    添加事件:
    // callback 可接收$emit传递过来的参数
    $on(eventName,callbcak)
    
    触发事件:
    $emit(eventName, 传递给事件callback的数据)
    
    移除事件:
    $off(eventName, callback)
    

    自定义事件用途

    自定义事件在Vue常用于组件间的数据传递。

    子组件向父组件传递数据

    父组件:

    <template>
      <div>
        {{ msg }}
      <Child @changeMsg="change"></Child>
      </div>
    </template>
    
    <script>
    import Child from './Child.vue'
    export default {
      data() {
        return {
          msg: ''
        }
      },
      components: {
        Child
      },
      methods:{
        change(val){
          this.msg = val;
        }
      }
    }
    </script>
    

    子组件:

    <template>
        <div>
            <button @click="trigger()">change</button>
        </div>
    </template>
    <script>
    export default {
        methods: {
            trigger(){
                this.$emit('changeMsg', '126513')
            }
        }
    }
    </script>
    

    上面例子中,父组件导入了子组件,并在子组件的根标签上注册了监听事件changeMsg。若changeMsg被触发,则调用父组件里的change()方法。子组件则通过this.$emit('changeMsg', '126513')来触发changeMsg

    这里需要注意一点:父组件注册监听事件时一定要添加给子组件的根标签(也就是这里的<Child>)。否则,子组件无法找到changeMsg事件。

    兄弟组件间的通讯

    自定义组件也可以用于兄弟组件间的通讯,需借助事件总线来实现。具体请看Vue 组件间通讯之非父子组件间通讯——事件总线(EventBus)一文。

    后记

    灵活使用自定义事件,是开发的重要技能。其实,仔细观察HTML原生事件就会发现其跟自定义事件是一样的。区别无非就是在使用时HTML原生事件不用进行添加事件设定触发事件操作而已。因为HTML早早替用户写好这部分了。这样看来,自定义事件是对原生事件的扩展与补充,更灵活、更高级了。

    以上,就是我关于Vue自定义事件的见解。如有不对,望指出,必将虚心听取。

    展开全文
  • 主要介绍了vue自定义全局组件(自定义插件)的用法,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
  • 主要介绍了vue自定义指令实现方法,结合实例形式分析了vue.js自定义指令相关定义、注册、使用方法及操作注意事项,需要的朋友可以参考下
  • 今天在看 Node.js 文档的时候讲到事件触发器,其中的 emit 方法让我想到了 Vue 中的自定义事件,借此我对 Vue 又有了新的理解,所以将我的理解记录下来,留作学习笔记。 Node.js中的事件触发器 Node.js 为我们提供了...
  • 具体参考博客:
  • 主要介绍了Vue自定义全局弹窗组件操作,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
  • 主要介绍了Vue 自定义指令功能,结合完整实例形式分析了vue.js自定义指令相关实现与使用操作技巧,需要的朋友可以参考下
  • vue 自定义事件 传入额外参数

    千次阅读 2019-09-28 17:00:40
    <div @click="myClick">我是子组件内容<div> //子组件自定义事件 ...//父组件调用自定义事件,把$event 换成 arguments 也是可以获取到自定义事件对象的 <div @childClick="getData($ev...
    <div @click="myClick">我是子组件内容<div>
    
    //子组件自定义事件
    myClick(){
        
        this.emit("childClick",'我是子组件参数')
    
    }
    //父组件调用自定义事件,把$event 换成 arguments 也是可以获取到自定义事件对象的
    
    <div @childClick="getData($event,'额外参数')">我是父级内容<div>
    
    
    getData(val,parmas){
        
         //如果是系统自带的事件$event就是event对象数据 ,自定义事件$event携带的是你在emit 传入的数据
    
         //val 是子组件的传过来的数据
         //parmas 是父组传过来的数据
    
    }
    

     

    展开全文
  • 首先 vue 实例有event对象 可以实现自定义事件,实现兄弟组件间通信。 项目结构:event.js 导出vue实例对象 Input.vue 和 list.vue 是兄弟组件 ,index.vue 引入 两个子组件,实现 Input 和list 间通信 看event....
  • 使用vue2.0实现自定义弹窗指令,当标签有该指令时,点击标签可以弹出弹窗。下面通过实例代码给大家介绍Vue自定义弹窗指令的相关知识,感兴趣的朋友一起看看吧
  • 本篇文章主要介绍了Vue自定义指令封装节流函数的方法示例,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
  • 为了满足用户体验,小编用vue写了一个自定义数字键盘组件,用户体验度还不错。 废话不多说,先上效果图吧~ 效果图   具体实现 布局排版 请输入金额 <div class='input-box'>{{ money }} ...
  • 主要介绍了vue自定义指令之面板拖拽的实现,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
  • 本文通过图文并茂的形式给大家介绍了Vue组件之自定义事件的功能,非常不错,具有参考借鉴价值,需要的朋友可以参考下
  • Vue提供自定义实现指令的功能, 和组件类似,可以是全局指令和局部指令,这篇文章主要介绍了vue自定义tap指令及tap事件的实现 ,需要的朋友可以参考下
  • 自定义导航模板
  • vue自定义移动端touch事件,点击、滑动、长按事件.将以上代码保存到一个js文件内,引入到页面vue库文件之后、用户js文件之前。这样就可以使用vue的触屏事件了。
  • 主要介绍了基于vue自定义指令实现按钮级权限控制,本文给大家介绍的非常详细,感兴趣的朋友跟随脚本之家小编一起学习吧
  • 特别注意事项,经我一个半小时的验证才发现 @Aclick 这样的自定义事件大写开头的永远是无效的,起码现在的Vue还不支持 @aclick 这样自定义事件以小写开头的才是语法允许的,大写开头是不可以的 ...
  • 1. 自定义组件标签(如在主页插入顶栏/侧边栏等)   比如说要将Header.vue插入Home.vue中显示:定义好Header.vue,然后在Home.vue的script中导入Header.vue: import vHead from "./Header.vue"; #导入Header....
  • 主要介绍了vue 自定义提示框(Toast)组件的实现代码,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
  • 主要介绍了解决VUE自定义拖拽指令时 onmouseup 与 click事件冲突问题,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
  • 主要介绍了vue 自定义组件的写法与用法,本文通过实例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值 ,需要的朋友可以参考下
  • 主要介绍了vue自定义底部导航栏Tabbar的实现代码,非常不错,具有一定的参考借鉴价值,需要的朋友可以参考下

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 145,327
精华内容 58,130
关键字:

vue自定义事件怎么写

vue 订阅