vue2知识点：组件自定义事件

头像头饰
刘大猫
     黑龙江
    阅读 12 分钟

    在这里插入图片描述
    @[toc]

    3.13自定义事件

    适用于：子组件 =》 给父组件传值

    在这里插入图片描述

    父组件给子组件传值使用props属性, 那么需要子组件更新父组件时,要使用自定义事件<font color='red'>$on和$emit：</font>

    • <font color='red'>$on</font>监听: 不能监听驼峰标示的自定义事件, 使用全部小写(abc)或者-(a-b-c)
    • <font color='red'>$emit</font>主动触发: $emit(事件名,传入参数)

    3.13.1自定义事件绑定到子组件

    <font color='red'>注意点1：</font>

    问题：子组件调用父组件方法时传参，父组件如何接收到参数值？
    1）如果只传递一个参数，比如：this.$emit('update-count', "你是谁？"); 
那么子组件标签形参可不带参数或者形参使用$event
<child v-on:update-count="changeCount"></child> 
或者<child v-on:update-count="changeCount($event)"></child>
那么父组件(vue实例)方法中通过value即可接收参数比如：  changeCount:function(value)
    2）如果传递多个参数，比如： this.$emit('update-count', "ldz",29);，
那么子组件标签形参请使用arguments
<child v-on:update-count="changeCount(arguments)"></child>
那么父组件(vue实例)方法中通过value[index]即可接收参数，比如：
changeCount:function(value){
console.log("@" + value[0]);
console.log("@" + value[1]);

    <font color='red'>有2种方式都可以实现父组件接收子组件传递的多个参数</font>
    <font color='red'>方式1（推荐方式1，因为好记）：</font>调用子标签不写括号和形参，但方法形参使用...

    子组件
    this.$emit('student1Send', this.ipt, this.ipt2)
    父组件
    <B ref="childrenB" @student1Send="getB"></B>

methods: {
    getB(...args) {
      this.strb = args[0];
      this.strb2 = args[1];
    }

    <font color='red'>方式2：</font>调用子标签写括号和形参arguments，那么方法形参不使用...

    子组件
    this.$emit('student1Send', this.ipt, this.ipt2)
    父组件
    <B ref="childrenB" @student1Send="getB(arguments)"></B>
methods: {
    getB(args) {
      this.strb = args[0];
      this.strb2 = args[1];
    }

    <font color='red'>注意点2：</font>子组件标签中形参必须叫arguments，而父组件中方法形参function(value)，这个value名字可以叫任意名字

    举例1：模拟只传递一个参数

    1）声明父组件
    var app = new Vue({
    el:'#app',
    data:{
        count:0
    },
    methods:{
        //定义计数方法
        changeCount:function(value){
            console.log(value);
            //计数
            this.count += 1;
        }
    }
});
    2）自定义事件
    <div id="app">
    <!-- 自定义事件update-count -->
    <child v-on:update-count="changeCount"></child>
    <p>{{count}}</p>
</div>

    在事件v-on:update-count中的update-count就是自定义事件的名字，不要使用驼峰标示，html不区分大小写，会导致子元素无法主动触发父组件的自定义事件。

    3）定义子组件
    Vue.component('child', {
    template:'<button v-on:click="update">子组件Child</button>',
    methods:{
        update: function () {
            console.log('update');
            //主动触发事件执行
            this.$emit('update-count', '子组件参数');
        }
    }
});

    子组件child中定义的update方法，内部通过$emit('update-count')主动触发父元素事件的执行。

    结果展示

    在这里插入图片描述

    举例2：模拟传递多个参数

    子组件
    <template>
  <div>
    <button @click="student1Send()">点击学生1组件发送消息</button>
  </div>
</template>

<script>
export default {
  name: "B",
  data() {
    return {
      ipt:"我是学生1组件发过来数据",
      ipt2:"我是你爸爸"
    }
  },
  methods: {
    student1Send() {
      this.$emit('student1Send', this.ipt, this.ipt2)
    },
  }
}
</script>
<style scoped>
</style>
    父组件
    <template>
  <div id="app">
    <B ref="childrenB" @student1Send="getB(arguments)"></B>
    <p>接收的b数据：{{strb}}</p>
    <p>接收的b数据：{{strb2}}</p>
  </div>

</template>

<script>
import B from "./B.vue"

export default {
  name: "A",
  data() {
    return {
      strb:"",
      strb2:"",
    }
  },
  components: {
    B
  },
  methods: {
    getB(args) {
      console.log(args);
      this.strb = args[0];
      this.strb2 = args[1];
      console.log(this.$refs.childrenB)
    }
  },
    结果展示

    在这里插入图片描述
    在这里插入图片描述

    3.13.2自定义事件挂载到父组件

    自定义事件不仅可以绑定在子组件，也可以直接挂载到父组件，<font color='red'>使用$on绑定和$emit触发。</font>
    <font color='red'>2种方式区别：</font>
    <font color='red'>自定义事件绑定到子组件，</font>其实是调用定义子组件方法 -> 调用自定义事件 -> 调用父组件方法。
    <font color='red'>自定义事件挂载到父组件，</font>其实是vue实例直接配置自定义函数从而达到操作父组件属性，<font color='red'>第一步</font>通过app.$on主动挂载自定义函数名，主动挂载就等于vue实例定义method方法，<font color='red'>第二步</font>通过app.$emit主动触发事件。

    <div id="app">
</div>

var app = new Vue({
    el:'#app',
    data:{
        count:0
    }
});

//主动挂载
app.$on('update-count', function(value){
    console.log(value);
    //计数
    this.count += 1;
});
app.$emit('update-count',123);

    3.13.3自定义事件-解绑

    自定义事件既然可以定义绑定，那么肯定也支持解绑，所谓解绑就是让自定义事件失效。
    <font color='red'>语法：this.$off('自定义事件名')</font>

    this.$off('atguigu') //解绑一个自定义事件
this.$off(['atguigu','demo']) //解绑多个自定义事件
this.$off() //解绑所有的自定义事件

    3.13.4使用自定义事件的容易出错的点

    案例1：有3个组件，父组件App.vue，2个子组件Student.vue和School.vue，想实现点击子组件按钮把学生名传递给App，并在父组件App上显示出来

    初始化页面

    在这里插入图片描述

    点击按钮成功收到消息图片

    在这里插入图片描述
    完整代码：

    App.vue
    <template>
  <div class="app">
    <h1>{{msg}}，学生姓名是:{{studentName}}</h1>

    <!-- 通过父组件给子组件传递函数类型的props实现：子给父传递数据 -->
    <School :getSchoolName="getSchoolName"/>

    <!-- 通过父组件给子组件绑定一个自定义事件实现：子给父传递数据（第一种写法，使用@或v-on） -->
     <Student @atguigu="getStudentName"/>
    <!-- 通过父组件给子组件绑定一个自定义事件实现：子给父传递数据（第二种写法，使用ref） -->
    <Student ref="student" />
  </div>
</template>

<script>
import Student from './components/Student'
import School from './components/School'

export default {
  name:'App',
  components:{School,Student},
  data() {
    return {
      msg:'你好啊！',
      studentName:''
    }
  },
  methods: {
    getSchoolName(name){
      console.log('App收到了学校名：',name)
    },
    getStudentName(name,...params){
      console.log('App收到了学生名：',name,params)
      this.studentName = name
    },
  },
  mounted() {
    // this.$refs.student.$on('atguigu',this.getStudentName) //绑定自定义事件
    // this.$refs.student.$on('atguigu',function (name,...params) {
    //   console.log('App收到了学生名：',name,params)
    //   console.log("this:", this);  //使用自定义组件的配置项的普通函数中this指代子组件Student.vue的vc
    //   this.studentName = name
    // }) //绑定自定义事件
    this.$refs.student.$on('atguigu',(name,...params) => {
      console.log('App收到了学生名：',name,params)
      console.log("this:", this); //使用自定义组件的配置项的箭头函数中this指代父组件App.vue的vc
      this.studentName = name
    }) //绑定自定义事件
  },
}
</script>

<style scoped>
.app{
  background-color: gray;
  padding: 5px;
}
</style>
    School.vue
    <template>
    <div class="school">
        <h2>学校名称：{{name}}</h2>
        <h2>学校地址：{{address}}</h2>
        <button @click="sendSchoolName">把学校名给App</button>
    </div>
</template>

<script>
    export default {
        name:'School',
        props:['getSchoolName'],
        data() {
            return {
                name:'尚硅谷',
                address:'北京',
            }
        },
        methods: {
            sendSchoolName(){
                this.getSchoolName(this.name)
            }
        },
    }
</script>

<style scoped>
    .school{
        background-color: skyblue;
        padding: 5px;
    }
</style>
    Student.vue
    <template>
    <div class="student">
        <h2>学生姓名：{{name}}</h2>
        <button @click="sendStudentlName">把学生名给App</button>
    </div>
</template>

<script>
    export default {
        name:'Student',
        data() {
            return {
                name:'张三',
                sex:'男',
                number:0
            }
        },
        methods: {
            sendStudentlName(){
                //触发Student组件实例身上的atguigu事件
                this.$emit('atguigu',this.name,666,888,900)
            },
        },
    }
</script>

<style lang="less" scoped>
    .student{
        background-color: pink;
        padding: 5px;
        margin-top: 30px;
    }
</style>

    <font color='red'>方式1：</font>使用v-bind标签，父组件提前把函数给子组件，子组件用props接收并调用，这样父组件函数中就能收到子组件传过来的值，只贴出重要代码

    App.vue
    <School :getSchoolName="getSchoolName"/>

methods: {
    getSchoolName(name){
      console.log('App收到了学校名：',name)
   }
}
    School.vue
    <button @click="sendSchoolName">把学校名给App</button>

props:['getSchoolName'],

methods: {
    sendSchoolName(){
        this.getSchoolName(this.name)
    }
}

    <font color='red'>方式2：</font>使用自定义函数，父组件App中定义自定义函数传递给子组件，子组件通过&emit触发自定义事件调用，父组件中定义函数接收传递过来的值

    App.vue
    <!-- 通过父组件给子组件绑定一个自定义事件实现：子给父传递数据（第一种写法，使用@或v-on） -->
<Student @atguigu="getStudentName"/>

getStudentName(name,...params){
      console.log('App收到了学生名：',name,params)
      this.studentName = name
}
    Student.vue
    <button @click="sendSchoolName">把学校名给App</button>

methods: {
    sendStudentlName(){
    //触发Student组件实例身上的atguigu事件
        this.$emit('atguigu',this.name,666,888,900)
    },
}

    <font color='red'>方式3：</font>使用ref标签，子组件通过&emit触发自定义事件调用，在父组件App中使用ref获取子组件标签同时搭配&on获取传递过来的值

    App.vue
    <!-- 通过父组件给子组件绑定一个自定义事件实现：子给父传递数据（第一种写法，使用@或v-on） -->
<Student @atguigu="getStudentName"/>

methods: {
getStudentName(name,...params){
      console.log('App收到了学生名：',name,params)
      this.studentName = name
}
}

//第1种写法
mounted() {
this.$refs.student.$on('atguigu',this.getStudentName) //绑定自定义事件
}
---------------------------------------------------------------------------------------
<!-- 通过父组件给子组件绑定一个自定义事件实现：子给父传递数据（第一种写法，使用@或v-on） -->
<Student @atguigu="getStudentName"/>

//第2种写法
mounted() {
this.$refs.student.$on('atguigu',(name,...params) => {
      console.log('App收到了学生名：',name,params)
      console.log("this:", this); //使用自定义组件的配置项的箭头函数中this指代父组件App.vue的vc
      this.studentName = name
    }) //绑定自定义事件
}

    容易出错点1：

    <font color='red'>在父组件App中使用$on的箭头函数中把子组件传递过来的值赋值给父组件属性，会导致父组件属性接收不到信息</font>

    失败图片

    在这里插入图片描述

    成功图片

    在这里插入图片描述

    <font color='red'>答案：</font>在父组件App中使用$on的普通函数this指代子组件的vc，而$on的箭头函数this指代父组件的vc，所以$on的普通函数的this.studentName = name就会赋值失败，正确写法就是上面说的，要么method定义赋值，$on中直接调用，要么$on中使用箭头函数去赋值

    mounted() {
this.$refs.student.$on('atguigu',function (name,...params) {
      console.log('App收到了学生名：',name,params)
      console.log("this:", this);  //使用自定义组件的配置项的普通函数中this指代子组件Student.vue的vc
      this.studentName = name
    }) //绑定自定义事件
}
---------------------------------------------------------------------------------------
mounted() {
this.$refs.student.$on('atguigu',(name,...params) => {
      console.log('App收到了学生名：',name,params)
      console.log("this:", this); //使用自定义组件的配置项的箭头函数中this指代父组件App.vue的vc
      this.studentName = name
    }) //绑定自定义事件
}

    容易出错点2：

    问题：我在子组件Student 标签中使用了自定义事件，我想再绑定个原生事件，为啥原生事件失效了？
    <Student ref="student" @click="show"/>  //错误写法

methods: {
    show(){
            alert(123)
        }
    }

    <font color='red'>答案：</font>因为原生事件也使用@注解，子组件标签默认会把@标识的原生事件理解为是自定义事件，所以就失效了，解决办法是在@click后面加.native标识符，这样子组件就知道这个click方法是原生方法。

    <Student ref="student" @click.native="show"/> //正确写法
    再引出个思考点：为啥说子组件中根元素标签只能有一个，比如最外层只能有1个div标签，为啥能不能有2个？

    <font color='red'>答案：</font>给子组件标签绑定【自定义事件/原生事件】，实际是给里面的整个标签绑定函数，如果你有2个div，它哪知道给谁，如果2个都给岂不乱套了，当然这只是其中一个理由，实际子组件根元素标签只让有一个元素还有好多原因，只不过我还没学到。

    本人其他相关文章链接

    1.《基础篇第1章：vue2简介》包含Vue2知识点、个人总结的使用注意点及碰到的问题总结

    2.《基础篇第2章：vue2基础》包含Vue2知识点、个人总结的使用注意点及碰到的问题总结

    3.《进阶篇第3章：vue进阶-组件》包含组件、自定义事件、插槽、路由等等扩展知识点

    4.《基础篇第4章》：使用vue脚手架创建项目

    5.vue2知识点：数据代理

    6.vue2知识点：事件处理

    7.vue2知识点：列表渲染（包含：v-for、key、取值范围、列表过滤、列表排序、vue监视对象或数组的数据改变原理、总结vue数据监测）

    8.vue2知识点：计算属性与监听属性

    9.vue2知识点：生命周期（包含：生命周期介绍、生命周期钩子、整体流程图详解）

    10.vue2知识点：非单文件组件和单文件组件

    11.vue2知识点：组件is属性

    12.vue2知识点：组件模板定义

    13.vue2知识点：组件的props属性、非props属性、props属性校验

    14.vue2知识点：组件自定义事件

    15.vue2知识点：组件插槽分发

    16.vue2知识点：动态组件

    17.vue2知识点：混入

    18.vue2知识点：浏览器本地缓存

    19.vue2知识点：全局事件总线（GlobalEventBus）

    20.vue2知识点：消息订阅与发布

    21.vue2知识点：nextTick语法

    22.vue2知识点：Vue封装的过度与动画

    23.vue2知识点：路由

    24.vue2知识点：vm调用待$命令介绍

    25.vue组件通信案例练习（包含：父子组件通信及平行组件通信）

    26.vue表单案例练习：vue表单创建一行数据及删除数据的实现与理解

    27.vue2基础组件通信案例练习：待办事项Todo-list案例练习

    28.vue2基础组件通信案例练习：把案例Todo-list改写成本地缓存

    29.vue2基础组件通信案例练习：把案例Todo-list改成使用自定义事件

    30.vue2基础组件通信案例练习：把案例Todo-list改成使用全局事件总线

    31.vue2基础组件通信案例练习：把案例Todo-list改成使用消息订阅与发布

    32.vue2基础组件通信案例练习：把案例Todo-list新增编辑按钮

    33.vue2基础组件通信案例练习：把案例Todo-list改成使用动画与过度

    34.学习vue2遇到过的问题及个人总结

    前端vue.jsvue2组件化事件
    刘大猫
    6 声望1 粉丝

    如果有天突然发现路的尽头还是路的话，希望你还没错过太多沿路的风景和眼前珍惜的人。

    « 上一篇
    vue2知识点：组件插槽分发
    下一篇 »
    vue2知识点：组件is属性

    引用和评论

    推荐阅读
    头像
    SpringBoot项目的html页面使用axios进行get post请求

    刘大猫

    头像
    CSS团队协作规范

    寒青赞 36阅读 3.8k

    头像
    100个React最佳实践小技巧

    夕水赞 17阅读 2.5k评论 4

    头像
    不使用 JS 纯 CSS 获取屏幕宽高

    南城FE赞 15阅读 2.1k评论 3

    头像
    前端开发工具

    寒青赞 15阅读 4.7k

    头像
    开发插件集合

    寒青赞 12阅读 3.1k

    头像
    CSS 现在终于支持高度 auto 过渡动画了

    XboxYan赞 12阅读 2.4k

    0 条评论
    得票最新