Vue中emit事件无法触发的问题及解决

目录
  • Vue emit事件无法触发问题
  • Vue中emit的使用
    • vue子传父参数的方法共有两种
    • 下列优先讲解下其emit的传输方法

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>

Vue中emit的使用

vue子传父参数的方法共有两种

1、子组件通过emit传输

2、通过自定义组件传输

下列优先讲解下其emit的传输方法

在父组件中

（1）首先需要定义其改变的函数，一般emit多用于点击事件，例如我目前所在地的名称是北京，我想通过子组件的点击，导致我的名称发生其改变

（2）定义其data属性存储器数据

<template>
  <div class="hello">
    <h2>我是父组件,我需要建立一些参数</h2>
    <h3>我所在地的名称是:{{ msg }}</h3>
    <span><mHome @showCityName="updateCityName" /></span>
  </div>
</template>
<script>
import mHome from "@/views/Home.vue";
export default {
  components: {
    mHome,
  },
  data() {
    return {
      msg: "北京",
    };
  },
  methods: {
    updateCityName(data) {
      this.msg = data.msg;
    },
  },
};
</script>

在子组件中

（1）定义其点击方法，并且传入其需要改变的值，例如我所改变的是城市为武汉

（2）定义emit函数，并且传输的showCityName需与父组件的点击事件名称保持一致才行

（3）通过data进行传参处理即可

<template>
  <div class="home">
    <h1>我是子组件</h1>
    <h2 @click="change('武汉')">测试其emit组件</h2>
  </div>
</template>

<script>
// @ is an alias to /src
export default {
  methods: {
    change(val) {
      let data = {
        msg: val,
      };
      this.$emit("showCityName", data);
    },
  },
};
</script>

效果图

总结：

（1）需要在其子组件中定义emit事件

（2）emit的传递子组件和父组件的函数名需要保持一致

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

赞 (0)

相关推荐

  • Vue $emit()不能触发父组件方法的原因及解决

    $emit传入的事件名称只能使用小写,不能使用大写的驼峰规则命名 如果修改后还是不行的话,就改用: this.$parent.Event (Event为父组件中的自定义方法) 补充知识:Vue.js 使用 $emit 触发事件填坑 vue的组件内触发外部事件不起作用 vue的组件内触发自定义事件(发外部事件)不起作用 今天学习vue的自定义组件功能,在组件内部触发一个事件,在使用组件的地方使用v-on绑定这个事件,然而触发一直不生效,检查了很多遍的代码都没看出什么问题,代码如下: <div id

  • 解决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.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.将触发事件放在父节点上触发,就可以监听到触发的事件了,

  • 关于Vue3父子组件emit参数传递问题(解决Vue2this.$emit无效问题)

    关于Vue3父子组件emit参数传递问题(解决Vue2this.$emit无效问题)

    目录 1.解决this.$emit无效问题 2.Vuex问题 3.总结 之前写了一篇Vue3路由跳转问题的博客,发现还是有很多同学对基本的使用改变还没有了解,于是我就顺道把常用的组件间传递的方式也写一下吧....... 注意的是: 1.Vue3中不在强调this的使用,可以说你在setup中完全不能用this,不像Vue2中把全部的内容都集成到this中. 2.Vue3现在由于compositionAPI的方式可以说是弱化了Vuex的存在(当然Vuex现在可以用没什么变化). 3.如果您有Vue

  • Vue中emit事件无法触发的问题及解决

    目录 Vue emit事件无法触发问题 Vue中emit的使用 vue子传父参数的方法共有两种 下列优先讲解下其emit的传输方法 Vue emit事件无法触发问题 在父组件中定义事件监听,会出现无法触发对应的事件函数,在下面的代码中,我想通过v-on:event_1=“handle”, 想监听子组件中的event_1事件,但尽管事件发生了, 但还是触发不了,这个问题在于v-on:event_1="handle"的位置,需要放在 <my-template :users=“user

  • 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中 $emit的用法详解

    1.父组件可以使用 props 把数据传给子组件. 2.子组件可以使用 $emit 触发父组件的自定义事件. vm.$emit( event, arg ) //触发当前实例上的事件 vm.$on( event, fn );//监听event事件后运行 fn: 例如:子组件: <template> <div class="train-city"> <span @click='select(`大连`)'>大连</span> </div&

  • vue中$emit的用法详解

    vue中$emit的用法详解

    目录 vue2.x vue3.x 子组件 父组件 vue2.x 1.父组件可以使用 props 把数据传给子组件.2.子组件可以使用 $emit,让父组件监听到自定义事件 . vm.$emit( event, arg ) //触发当前实例上的事件 vm.$on( event, fn );//监听event事件后运行 fn: 例如:子组件: <template> <div class="train-city"> <h3>父组件传给子组件的toCity:

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

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

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

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

  • vue中的事件修饰符once,prevent,stop,capture,self,passive

    目录 vue中的事件修饰符 1. once 2. prevent 3. stop 4. capture和self 5. passive与prevent相反 vue事件处理(修饰符) 事件修饰符 按键修饰符 系统修饰键 鼠标按钮修饰符 vue中的事件修饰符 1. once 只执行一次 <div v-on:click.once='alert("1")'></div> 只有在第一次点击时会执行,再次点击不会起作用 2. prevent 阻止默认程序,比如form表单中

  • vue中提示$index is not defined错误的解决方式

    今天学习Vue中遇到了一个报错信息:$index is not defined,是我写了个for循环在HTML中,然后是因为版本的问题 下面是解决方法: 原来的是 v-for="person in items" v-on:click="deletePerson($index)"//这个仅仅适用于1.0版本,不要采坑了同学们 这个在Vue1.0版本中式适用的可以直接使用$index,但是在2.0是不适合的 在Vue 2.0版本中获取索引我们需要通过 v-for = &

  • vue中watch监听不到变化的解决

    目录 watch监听不到对象内部的变化 解决方法: watch的handler方法的两个参数值相同 解决方法: 全部代码 watch监听不到对象内部的变化 有的时候vue会出现这种现象,无法监听到复杂对象内部的变化:当对象里面原本有某一个属性,并对这个属性操作时,watch是可以监听到当前属性的变化的.但是,若对象里面本没有这个属性的时候,在操作时将属性添加进去,同时包括之后对这个属性的操作,watch是都检测不到的.这是因为vue的watch会在初始化的时候通过object.definePro

  • Vue中的v-for指令不起效果的解决方法

    我的代码之前类似下面的结构 <div id="example-1" v-for="item in items"> <ul> <li> {{ item.message }} </li> </ul> </div> 结果发现不好用,数据读入了但是没有显示 于是我后来看官网的例子才明白,原来是id和v-for不在一个层级上,官网的例子如下,我按照不在一个层级上改,果然好用了 <ul id=&quo

随机推荐