vue中的事件触发(emit)及监听(on)问题

目录
  • vue事件触发(emit)及监听(on)
    • 每个 vue 实例都实现了事件接口
    • 案例
  • vue emit事件无法触发问题

vue事件触发(emit)及监听(on)

每个 vue 实例都实现了事件接口

  • 1.使用 $on(eventName,callback) 监听事件
  • 2.使用 $emit(eventName,[…args]) 触发事件

$emit 和 $on 必须都在实例上进行触发和监听。

// on监听emit触发的事件
created:function(){
    this.$on('emitFn',(arg)=> {
          console.log('on监听参数====',arg)  //['string',false,{name:'vue'}]
      })
  },
  methods:{
    emit () {
        // $emit 事件触发  参数是多个不同的数据类型时 用数组传递
         this.$emit('emitFn',['string',false,{name:'vue'}])
         
         // 监听多个emit事件,将事件名用数组形式写  ['emitFn1','emitFn2']；
          this.$emit(['emitFn1','emitFn2'],'arg1')
      }
  }

案例

通过在父级组件中，拿到子组件的实例进行派发事件，然而在子组件中事先进行好派好事件监听的准备，接收到一一对应的事件进行一个回调，同样也可以称之为封装组件向父组件暴露的接口。

vue emit事件无法触发问题

在父组件中定义事件监听，会出现无法触发对应的事件函数，在下面的代码中，我想通过v-on:event_1=“handle”, 想监听子组件中的event_1事件，但尽管事件发生了， 但还是触发不了，这个问题在于v-on:event_1="handle"的位置，需要放在 <my-template :users=“users” v-on:event_1=“handle” ></my-template> 中。

<body>
    <div id='app' v-on:event_1="handle1">
        <my-template :users="users"></my-template>
    </div>

</body>
<script>
    Vue.component('my-template', {
        data: function () {
            return {
                test:"hello"
            }
        },
        props: ["users"],
        template: `
        <div>
            <ul>
                <li v-for="item in users" :key="item.id">
                    <div>
                    <label>name:</label>
                    {{item.name}}
                    <label>content:</label>
                    {{item.content}}
                    <label>time:</label>
                    {{item.time}}
                    <input type="button" value="remove" @click="remove(item.id)"></input>
                    <input type="button" value="通知" @click="$emit('event_1',this)"></input>
                    </div>
                </li>
            </ul>
        </div>
    `,
    methods:{
        remove(id){
            console.log(id);
            for(let i = 0; i<this.users.length;++i){
                if(this.users[i].id == id){
                    this.users.splice(i,1);
                    break;
                }
            }
        },
        notice(id){
            console.log("notice", id);

        },
        handle(e){
            console.log("son handle",e)
        }
    }
    })
    var vm = new Vue({
        el: '#app',
        data: {
            posts: [
                { id: 1, title: 'My journey with Vue' },
                { id: 2, title: 'Blogging with Vue' },
                { id: 3, title: 'Why Vue is so fun' }
            ],
            postFontSize: 1,
            searchText: 'hello',
            users:[
                {
                    name:"zhangsan",
                    id:'1',
                    time:new Date().getUTCDate(),
                    content:"白日依山尽，黄河入海流"
                },
                {
                    name:"lisi",
                    id:'2',
                    time:new Date().getUTCDate(),
                    content:"会当凌绝顶，一览众山小"
                },
                {
                    name:"wangwu",
                    id:'3',
                    time:new Date().getUTCDate(),
                    content:"大漠孤烟直，长河落日圆"
                }
            ]
        },
        methods:{
            handle1(e){
                console.log("event 事件触发，参数为:",e);
            }
        }
    })
</script>

以上为个人经验，希望能给大家一个参考，也希望大家多多支持我们。

赞 (0)

相关推荐

  • 解决Vue.js父组件$on无法监听子组件$emit触发事件的问题

    最近学习vuejs看例子中用$on无法监听子组件$emit触发事件: 使用版本 vue.js 2.2.5 参考文献 1.vuejs API 2.解决实例 问题分析 1.之前写的自定义组件事件触发为this.$emit("myclick",this.todo.text);,这样this指的是todo-item的每一项,而最后vm.$on监听的是app组件,也就出说监听的是父节点,而触发的是子节点,故监听不到这个事件的. 解决思路 1.将触发事件放在父节点上触发,就可以监听到触发的事件了,

  • vue 组件之间事件触发($emit)与event Bus($on)的用法说明

    组件之间事件触发 之前使用组件,并不是很频繁,是水平的问题,目前工作中,公司大佬带着我手写过一个组件,再此很感谢他的指导.目前简单的组件已经有了自己的逻辑思维,正在从低级码农向中级码农蜕变.废话不多说.上图看看组件情况. 新增按钮组件: 操作按钮组合组件: 此时有个需求就是,无论是哪个按钮,如果改变了列表中的数据,列表需要实时更新数据. 此时就需要用到组件间的事件触发. 父子组件之间事件触发可以使用$emit $emit的使用方法如下: 在子组件中,写一个click点击事件.比如: cancel

  • 解决vue bus.$emit触发第一次$on监听不到问题

    $emit与emit与emit与 $on的用法 新建bus.js import Vue from 'vue' export const bus = new Vue() 引用bus.js import {bus} from './bus' bus.$on('test', function (msg) { console.log(msg) }) bus.$emit('test', 11) bus.$emit触发第一次emit触发第一次emit触发第一次 $on监听不到 因为$emit 先于 $on

  • vue中的事件触发(emit)及监听(on)问题

    目录 vue事件触发(emit)及监听(on) 每个 vue 实例都实现了事件接口 案例 vue emit事件无法触发问题 vue事件触发(emit)及监听(on) 每个 vue 实例都实现了事件接口 1.使用 $on(eventName,callback) 监听事件 2.使用 $emit(eventName,[…args]) 触发事件 $emit 和 $on 必须都在实例上进行触发和监听. // on监听emit触发的事件 created:function(){     this.$on('e

  • vue中provide inject的响应式监听解决方案

    目录 provide inject的响应式监听解决 vue监听赋值及provide与inject provide inject的响应式监听解决 提示:provide 和 inject 绑定并不是可响应的.这是刻意为之的.然而,如果你传入了一个可监听的对象,那么其对象的属性还是可响应的. 所以传值传对象即可 provide(){     return {       provObj: {         uuidList:{}       }     }   }, this._provided.p

  • 在vue中对数组值变化的监听与重新响应渲染操作

    在我们项目开发过程中,实例中的数据类型可以是对象.数组等.在对象中,某个属性值发生更改时,我们可以通过对象的深度监听,以达到重新渲染页面的需求.或者查阅这篇文章 例如: <script> export default { data(){ return { objVal: { name: 'obj', type: 'obj' } } }, watch:{ objVal:{ handler(val,oldval){ }, deep: true, } }, methods:{ changeObj()

  • Vue中computed(计算属性)和watch(监听属性)的用法及区别说明

    Vue中computed(计算属性)和watch(监听属性)的用法及区别说明

    目录 计算属性computed 侦听属性watch 计算属性computed 支持缓存,只有依赖数据发生改变,才会重新进行计算 不支持异步,当computed内有异步操作时无效,无法监听数据的变化 computed 属性值会默认走缓存,计算属性是基于它们的响应式依赖进行缓存的,也就是基于data中声明过或者父组件传递的props中的数据通过计算得到的值 如果一个属性是由其他属性计算而来的,这个属性依赖其他属性,是一个多对一或者一对一,一般用computed 如果computed属性属性值是函数,

  • 深入浅析JavaScript中对事件的三种监听方式

    事件(Event)是JavaScript应用跳动的心脏,也是把所有东西粘在一起的胶水,当我们与浏览器中Web页面进行某些类型的交互时,事件就发生了. 第一种监听方式,也是最普遍使用的方式,是直接在代码上加载事件,产生效果: <table> <tr onmouseover='this.style.backgroundColor="red"' onmouseout='this.style.backgroundColor=""'><td>

  • 详解vue中v-on事件监听指令的基本用法

    一.本节说明 我们在开发过程中经常需要监听用户的输入,比如:用户的点击事件.拖拽事件.键盘事件等等.这就需要用到我们下面要学习的内容v-on指令. 我们通过一个简单的计数器的例子,来讲解v-on指令的使用. 二. 怎么做 定义数据counter,用于表示计数器数字,初始值设置为0 v-on:click 表示当发生点击事件的时候,触发等号里面的表达式或者函数 表达式counter++和counter--分别实现计数器数值的加1和减1操作 语法糖:我们可以将v-on:click简写为@click 三

  • Vue中watch监听第一次不触发、深度监听问题

    目录 watch监听第一次不触发.深度监听 第一次不触发 例如 vue watch使用无效问题 watch监听第一次不触发.深度监听 第一次不触发 handler:其值是一个回调函数.即监听到变化时应该执行的函数. deep:其值是true或false:确认是否深入监听.(一般监听时是不能监听到对象属性值的变化的,数组的值变化可以听到.) immediate:其值是true或false:确认是否以当前的初始值执行handler的函数 例如 我将父组件中的WatchId传递到这个子组件页面我要根据

  • 对vue中的事件穿透与禁止穿透实例详解

    在开发过程中经常遇到的一个场景,就是,页面弹窗,弹窗上有一个确定或者关闭按钮,这时,如果下方有一个按钮,那你点击弹窗的时候,也会触发弹窗下层的按钮事件,vue提供的解决方法就是直接在click.stop //阻止单击事件继续传播 <a v-on:click.stop="doThis"></a> js的解决办法是,直接在事件的方法中添加event.stopPropagation() //html <button>关闭</button> //

随机推荐