快捷導(dǎo)航

Vue中emit事件無(wú)法觸發(fā)的問(wèn)題及解決

更新時(shí)間：2022年09月23日 09:28:52 作者：y_hh_

這篇文章主要介紹了Vue中emit事件無(wú)法觸發(fā)的問(wèn)題及解決方案，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教

Vue emit事件無(wú)法觸發(fā)問(wèn)題

在父組件中定義事件監(jiān)聽(tīng)，會(huì)出現(xiàn)無(wú)法觸發(fā)對(duì)應(yīng)的事件函數(shù)，在下面的代碼中，我想通過(guò)v-on:event_1=“handle”, 想監(jiān)聽(tīng)子組件中的event_1事件，但盡管事件發(fā)生了，但還是觸發(fā)不了，這個(gè)問(wèn)題在于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:"會(huì)當(dāng)凌絕頂，一覽眾山小"
                },
                {
                    name:"wangwu",
                    id:'3',
                    time:new Date().getUTCDate(),
                    content:"大漠孤煙直，長(zhǎng)河落日?qǐng)A"
                }
            ]
        },
        methods:{
            handle1(e){
                console.log("event 事件觸發(fā)，參數(shù)為:",e);
            }
        }
    })
</script>

Vue中emit的使用

vue子傳父參數(shù)的方法共有兩種

1、子組件通過(guò)emit傳輸

2、通過(guò)自定義組件傳輸

下列優(yōu)先講解下其emit的傳輸方法

在父組件中

（1）首先需要定義其改變的函數(shù)，一般emit多用于點(diǎn)擊事件，例如我目前所在地的名稱是北京，我想通過(guò)子組件的點(diǎn)擊，導(dǎo)致我的名稱發(fā)生其改變

（2）定義其data屬性存儲(chǔ)器數(shù)據(jù)

<template>
? <div class="hello">
? ? <h2>我是父組件,我需要建立一些參數(shù)</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）定義其點(diǎn)擊方法，并且傳入其需要改變的值，例如我所改變的是城市為武漢

（2）定義emit函數(shù)，并且傳輸?shù)膕howCityName需與父組件的點(diǎn)擊事件名稱保持一致才行

（3）通過(guò)data進(jìn)行傳參處理即可

<template>
  <div class="home">
    <h1>我是子組件</h1>
    <h2 @click="change('武漢')">測(cè)試其emit組件</h2>
  </div>
</template>

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

效果圖