Vue组件传值 $emit子传父&事件触发

Posted 2021-08-28 白瑕

Vue $emit触发事件与传值

文章目录

• Vue $emit触发事件与传值
• 一、$emit传递事件
• 二、$emit传递值
• 三、子传父$emit
• 总结

一、$emit传递事件

用来从子组件往父组件内传值,也能传事件,我们可以使用$ emit()让子组件得以触发父组件(子组件被哪个组件作为模板调用,哪个组件就是这个子组件的父组件;)中的事件函数.
$ emit()被执行后会向父组件内发送自己括号内的参数,事件、值作参数都可以,值可以是data里的值,绑定到子组件的html上, 时刻变化.

但是在父组件内的子组件标签上要有能被$emit()发送来的事件触发的事件函数,即父组件内的子组件标签上要有针对[子组件发送来的事件]的监听,不然我们传过去一个事件也没什么用

我们通常不会直接放任子组件向父组件发送事件,你开局就发过去把事件函数触发了也没有什么意义.
更多的使用方法是在子组件内定义一个点击事件(或者什么其他事件),能触发子组件内某个函数,然后这个子组件内的函数被触发后会使用$emit()向父组件内发送一个什么事件来触发父组件内某个已绑定的事件函数,这样就能做到在子组件内控制父组件事件函数的触发,就像这样:

<!-- 这里是子组件; -->
<template>
  <div @click="bannerClick"> <!-- !!!! -->
   <!-- ^点击触发bannerClick事件函数^ -->
    <div class="editbanner">
      <span>{{ left }}</span>
    </div>
  </div>
</template>

//这里是子组件
export default {
  props: ["left"],
  methods: {
    bannerClick() {
    //bannerClick事件函数触发;
      this.$emit("bannerClick");//!!!!
    //向父组件发送bannerClick事件;
    },
  },
};

上面子组件已经发出了事件,那么父组件:

<!-- 这里是父组件 -->
    <edit-banner left="昵称" @bannerClick="show = true">
    <!-- ^bannerClick事件在此处被监听,
    触发后使data()里的show属性值变为true,让edit-banner组件出现^ -->
    </edit-banner>

//这里是父组件;
import EditBanner from "@/components/common/EditBanner";
export default {
  name: "Edit",
  data() {
    return {
      show: false,
      //show属性,在bannerClick事件触发后变为true;
    };
  },
  components: {
    EditBanner,
  },
}

就先这样,您要是有看不明白地方的可以在评论区指出,我会再次更新来完善.

---

二、$emit传递值

<!-- 这是在子组件 -->
<template>
  <div id="forms">
      <form>
        <input type="text" v-model="contentToSubmit">
        <!-- 绑定data中的contentToSubmit -->
        <input type="submit" v-on:click="Submit">
        <!-- ^点击input触发子组件Submit函数^ -->
    </form>
  </div>
</template>

//这是在子组件
export default {
  name: 'Form',
  data:function(){
    return{
      contentToSubmit:'',
  },
  methods: {
      formSubmit: function(){
          this.$emit('Submit', this.contentToSubmit); 
      //拿到data中的contentToSubmit,连同Submit一起传到父组件;
      }
  }
}

<!-- 这是在父组件 -->
<template>
  <div id="app">
   <forms v-on:Submit='addContent'></forms>
   <!-- 此处监听了子组件的Sumit事件,触发addContent事件函数 -->
  </div>
</template>

import Forms from './components/Forms'
export default {
  name: 'App',
  components:{
      Forms
  },
  methods:{
      addContent:function(contentToSubmit){
      //addContent接收了伴随Submit事件传递过来的contentToSubmit
          alert(contentToSubmit)
      }
  }
}

---

Vue传值决定出多出几期来记述各种传值方法,所以就把以前写的分类了,下面这部分是以前写的,可能理解上有些粗略,主要是围绕例子来的, 您要有兴趣就看看,不想看也无所谓啦.

---

三、子传父$emit

子组件需要向父组件提交其自身发生的事件，和事件发生的位置对应的数据，父组件才能判断下次请求什么数据。

为子组件添加事件监听，连携调用了子组件事件函数内部的"$emit"方法(子传父开始)，然后为父组件添加的针对 $emit内自定义事件的事件监听迅速监听到： $emit内的自定义事件被触发了，于是父组件马上开始执行针对这个自定义事件的事件函数。
您需要的数据在每一次事件函数被触发的时候，都会顺带传输一份携带数据的变量(这个变量通常是在子组件中存储数据的那个),传到最后一步的事件函数处，至此数据便进入父组件。

  const cpn = {
    template: '#cpn',
      data() {
        return {
          categories: [
             { id: '1', name: 'one' },
             { id: '2', name: 'two' }
          ]
        }
      },
    methods: {
      btnClick(item) {
        this.$emit('itemClick', item)
      }
    }
  }
  //Vue对象app挂载到id为app的DOM元素
  const app = new Vue({
    el: "#app",
  //子组件在父组件app内部注册以成为其子组件;
    components: {
      cpn
    },
    methods: {
      cpnClick(item) {
        console.log('cpnClick', item);
      }
    }
  })

在这个栗子中，cpn的data()中的数据被v-for提取到了item中，所以cpn是子组件(用谁的数据，谁就是本次通信的子组件)，

触发button上的点击事件后，btnClick函数被调用并传参item，此时btnClick中的$emit方法被调用，自定义事件itemClick被触发，并且传一个item；

然后itemClick这个自定义的事件会被父元素cpn的@itemClick="cpnClick"监听到，并且触发cpnClick方法，item也会就此从 $emit 处，伴随itemClick事件的触发被传到cpnClick内，进入父元素，至此item传输完毕。

---

总结

“啊, 这么简单的一点事情这个博主怎么讲的这么麻烦啊?”
确实,但我就是想讲的详细一点,毕竟我将来哪天说不定忘了也得回来看的,我要是回来查看到自己以前写的东西寥寥几笔带过那得多…
这一系列关于传值的文章还会有的.我会在最近继续更新;

这是我个人的一些理解啦,如果您发现我的不足,我很高兴您能为我指出!