Vue——组件的自定义事件

编程语言 2022-07-22 19:56:45 阅读次数: 0

文章目录

js内置事件

如：

  • 鼠标事件：click、mouseleave
  • 键盘事件：keyup、keydown等
    js内置事件是给htrml用的。

组件的自定义事件

我们也可以定义组件的自定义事件，这样定义出来的事件是给组件用的。

需求：实现子组件给父组件传递数据

使用props属性实现数据传递

步骤：

  • 父组件定义函数
  • 父组件将函数传递给子组件
  • 子组件调用方法，将自己的值作为参数传递给父组件
    eg：
    APP.vue
<template>
  <div class="app">
    <h1>app组件</h1>
    <!--通过父组件给子组件传递函数类型的props实现: 子给父传递数据-->
    <School :getSchoolName="getSchoolName" />
  </div>
</template>
<script>
//引入组件
import School from './components/School'
export default {
      
      
  name: 'App',
  components: {
      
      
    School
  },
  data() {
      
      
    return {
      
      
      msg:"欢迎！！！"
    }
  },
  methods: {
      
      
    getSchoolName(name) {
      
      
      console.log("App收到了学校的名字:",name)
    },
  }

}
</script>

<style>
.app{
      
      
  background: lightgoldenrodyellow;
}
</style>

School.vue

<template>
    <div class="demo">
        <h2>名字:{
   
   { name}}</h2>
        <h2>性别:{
   
   { sex }}</h2>
        <button @click="sendStudentName">把名字给app</button>
        <hr>
    </div>
</template>
<script>
export default {
      
      
    name:'StudentVue',
    data() {
      
      
        console.log(this)
        return {
      
      
            name:"yang123",
            sex:"男"
        }
    },
    methods: {
      
      
        sendStudentName() {
      
      
            // 触发Student组件实例身上的getName事件
            this.$emit('getName', this.name)
        }
    }
}

</script>
<style scoped>
.demo{
      
      
    background: lightsalmon;
}
</style>

使用自定义事件实现数据传递

法一：使用@或v-on

步骤：

  • 父组件将自定义的事件绑定到子组件身上
<Student v-on:getName="getStudentName" />

表示将自定义的事件 getName放到Student的实例对象上

  • 父组件定义事件的回调函数（即事件出发之后执行的函数）

  • 触发方法： Student的实例对象（vc）被父组件绑定一个事件getName，所以可以通过vc来触发自定义的事件
    vc.$emit('事件名')

  • 子组件通过实例对象触发事件：vc.$emit('事件名',参数名)
    触发事件的同时可以传递参数（可以有多个），app组件通过触发自定义事件而触发的函数接收参数，获取子组件的值。

APP.vue

<template>
  <div class="app">
    <h1>app组件</h1>
    <!--通过父组件给子组件绑定一个自定义事件实现:子给父传递数据-->
    <Student v-on:getName="getStudentName" />
    <!--通过父组件给子组件传递函数类型的props实现: 子给父传递数据-->
    <School :getSchoolName="getSchoolName" />
  </div>
</template>
<script>
//引入组件
import Student from './components/Student'
import School from './components/School'
export default {
      
      
  name: 'App',
  components: {
      
      
    Student,
    School
  },
  data() {
      
      
    return {
      
      
      msg:"欢迎！！！"
    }
  },
  methods: {
      
      
    getSchoolName(name) {
      
      
      console.log("App收到了学校的名字:",name)
    },
    getStudentName(name) {
      
      
      console.log("getName被触发了")
      console.log("App收到了学生的名字:", name)
    }
  }

}
</script>

<style>
.app{
      
      
  background: lightgoldenrodyellow;
}
</style>

Student.vue

<template>
    <div class="demo">
        <h2>名字:{
   
   { name}}</h2>
        <h2>性别:{
   
   { sex }}</h2>
        <button @click="sendStudentName">把名字给app</button>
        <hr>
    </div>
</template>
<script>
export default {
      
      
    name:'StudentVue',
    data() {
      
      
        console.log(this)
        return {
      
      
            name:"yang123",
            sex:"男"
        }
    },
    methods: {
      
      
        sendStudentName() {
      
      
            // 触发Student组件实例身上的getName事件
            this.$emit('getName', this.name)
        }
    }
}

</script>
<style scoped>
.demo{
      
      
    background: lightsalmon;
}
</style>

在这里插入图片描述

法二：使用ref

通过ref结合mount()来实现自定义事件

  • 父组件定义ref 和对应的mount()，在mount()将自定义的事件绑定给子组件
    同时父组件定义回调函数由mount()进行调用。
    格式：
<School ref="school" />

可以通过 this.$refs.student获取School的实例对象，通过$on为子组件绑定事件。

 methods: {
    
    
    getStudentName(name) {
    
    
      console.log("getName被触发了")
      console.log("App收到了学生的名字:", name)
    }
  },
  mounted() {
    
    
    this.$refs.student.$on('getName',this.getSchoolName)
  }
  • 事件的触发使用vc.$emit('事件名')

eg：
app.vue

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

    <!--通过父组件给子组件绑定一个自定义事件实现:子给父传递数据（使用v-on）-->
    <!-- <Student v-on:getName="getStudentName" /> -->

    <!--通过父组件给子组件传递函数类型的props实现: 子给父传递数据（使用ref）-->
    <Student ref="student" />
  </div>
</template>
<script>
//引入组件
import Student from './components/Student'
import School from './components/School'
export default {
      
      
  name: 'App',
  components: {
      
      
    Student,
    School
  },
  data() {
      
      
    return {
      
      
      msg:"欢迎！！！"
    }
  },
  methods: {
      
      
    getSchoolName(name) {
      
      
      console.log("App收到了学校的名字:",name)
    },
    getStudentName(name) {
      
      
      console.log("getName被触发了")
      console.log("App收到了学生的名字:", name)
    }
  },
  mounted() {
      
      
    this.$refs.student.$on('getName',this.getStudentName)
  }

}
</script>

<style>
.app{
      
      
  background: lightgoldenrodyellow;
}
</style>

student.vue:

<template>
    <div class="demo">
        <h2>名字:{
   
   { name}}</h2>
        <h2>性别:{
   
   { sex }}</h2>
        <button @click="sendStudentName">把名字给app</button>
        <hr>
    </div>
</template>
<script>
export default {
      
      
    name:'StudentVue',
    data() {
      
      
        console.log(this)
        return {
      
      
            name:"yang123",
            sex:"男"
        }
    },
    methods: {
      
      
        sendStudentName() {
      
      
            // 触发Student组件实例身上的getName事件
            this.$emit('getName', this.name)
        }
    }
}

</script>
<style scoped>
.demo{
      
      
    background: lightsalmon;
}
</style>

使用ref 和 v-on的区别

  • 使用ref 的灵活性更强
    如想要实现，点击按钮3s后再触发事件
  mounted() {
    
    
    setTimeout(() => {
    
    
      this.$refs.student.$on('getName', this.getStudentName)
    }, 3000)
  }

如想要事件只被触发一次

  mounted() {
    
    
      this.$refs.student.$once('getName', this.getStudentName)
  }

自定义事件的解绑

绑定的事件会出现在组件的实例对象上，所以如果事件不需要了，最好将事件进行解绑。
格式：vc.$off('事件名')解绑一个自定义事件
vc.$off([事件名1,事件名2,...])解绑多个自定义事件
vc.$off()解绑该组件实例的所有的自定义事件

<template>
    <div class="demo">
        <h2>名字:{
   
   { name}}</h2>
        <h2>性别:{
   
   { sex }}</h2>
        <button @click="sendStudentName">把名字给app</button>
        <button @click="unbind">点击解绑getName事件</button>
        <hr>
    </div>
</template>
<script>
export default {
      
      
    name:'StudentVue',
    data() {
      
      
        console.log(this)
        return {
      
      
            name:"yang123",
            sex:"男"
        }
    },
    methods: {
      
      
        sendStudentName() {
      
      
            // 触发Student组件实例身上的getName事件
            this.$emit('getName', this.name)
        },
        unbind() {
      
      
            this.$off('getName')//解绑一个自定义事件
        }

    }
}

</script>
<style scoped>
.demo{
      
      
    background: lightsalmon;
}
</style>

自定义事件和$destroy()方法

this.$destroy()用于销毁组件实例，当组件实例销毁后所有该组件实例的自定义事件全都不奏效。但是原生的js事件是不受影响的eg：click事件

需求：父组件如何将通过自定义事件获取的数据展示在页面上

  • 在data中定义变量，在事件回调函数执设置该变量 = 从子组件获取的值。
 data() {
    
    
    return {
    
    
      studentName:''
    }
  },
  methods: {
    
    
    getStudentName(name) {
    
    
      console.log("App收到了学生的名字:", name)
      this.studentName = name
    }  
  },

eg：使用：
app.vue

<template>
  <div class="app">
    <h1>app组件</h1>
    <h1>你好呀{
   
   {studentName}}</h1>

    <!--通过父组件给子组件绑定一个自定义事件实现:子给父传递数据（使用v-on）-->
    <Student v-on:getName="getStudentName" />
  </div>
</template>
<script>
//引入组件
import Student from './components/Student'
export default {
      
      
  name: 'App',
  components: {
      
      
    Student
  },
  data() {
      
      
    return {
      
      
      msg: "欢迎！！！",
      studentName:''
    }
  },
  methods: {
      
      
    getStudentName(name) {
      
      
      console.log("App收到了学生的名字:", name)
      this.studentName = name
    }  
  },

}
</script>

<style>
.app{
      
      
  background: lightgoldenrodyellow;
}
</style>

两个注意点

ref注意点

当使用ref方法将获取到的子组件数据展示到页面上时
app.vue:

<template>
  <div class="app">
    <h1>app组件</h1>
    <h1>你好呀{
   
   {studentName}}</h1>
    <!--通过父组件给子组件传递函数类型的props实现: 子给父传递数据-->
    <School :getSchoolName="getSchoolName" />

    <!--通过父组件给子组件绑定一个自定义事件实现:子给父传递数据（使用v-on）-->
    <!-- <Student v-on:getName="getStudentName" /> -->

    <!--通过父组件给子组件传递函数类型的props实现: 子给父传递数据（使用ref）-->
    <Student ref="student" />
  </div>
</template>
<script>
//引入组件
import Student from './components/Student'
import School from './components/School'
export default {
      
      
  name: 'App',
  components: {
      
      
    Student,
    School
  },
  data() {
      
      
    return {
      
      
      msg: "欢迎！！！",
      studentName:''
    }
  },
  methods: {
      
      
    getSchoolName(name) {
      
      
      console.log("App收到了学校的名字:",name)
    },
    getStudentName(name) {
      
      
      console.log("App收到了学生的名字:", name)
      this.studentName = name
    }  
  },
  mounted() {
      
      
    this.$refs.student.$on('getName', this.getStudentName)
      // this.$refs.student.$once('getName', this.getStudentName)
  }
}
</script>

<style>
.app{
      
      
  background: lightgoldenrodyellow;
}
</style>

可以将挂在函数mounted()和getStudentName一起写：

mounted() {
    
    
    this.$refs.student.$on('getName', function (name){
    
    
        console.log("App收到了学生的名字:", name)
        this.studentName = name
    })
  }

这样页面不能正常显示studentName，因为在事件调用函数中，谁调用事件，该函数的this就是谁，在该例子中，this就是Student实例对象，

如果一定要mounted()和getStudentName一起写，可以将getStudentName写成回调函数：

  mounted() {
    
    
    this.$refs.student.$on('getName', (name)=>{
    
    
        console.log("App收到了学生的名字:", name)
        this.studentName = name
    })
      // this.$refs.student.$once('getName', this.getStudentName)
  }

组件上使用js原生事件

组件上绑定js原生事件，组件会认为该事件是自定义的事件。
可以使用.native修饰符指明是原生的js事件

<Student ref="student" @click.native="show"/>

自定义事件绑定在哪一个实例上，就在那个实例上触发

自定义组件的使用场景

  • 自定义组件是一种组件间通信的方式，适用于:子组件===>父组件
    使用场景:A是父组件，B是子组件，B想给A传数据，那么就要在A中给B绑定自定义事件（事件的回调函数在A中)。
    事件的回调函数即触发事件所执行函数。

自定义组件的流程总结

在这里插入图片描述

猜你喜欢

转载自blog.csdn.net/mantou_riji/article/details/125889699
今日推荐
周排行
3.5星|津巴多《时间的悖论》：未来导向的人更有可能取得个人的成功，但帮助他人的可能性更小
k8s无脑系列（二）-DNS服务搭建和访问
leetcode 26 从排序数组中删除重复项
Python Web 框架：Django、Flask 与 Tornado
中科院计算所研究员陈益强：越来越'聪明'的智能硬件
dotNET面试（二）
数据备份 恢复
vue 路由知识点梳理及应用场景整理
ajax局部刷新流程
分段、分页&&内存碎片、外存碎片
每日归档
更多
2025-03-22(0)
2025-03-21(0)
2025-03-20(0)
2025-03-19(0)
2025-03-18(0)
2025-03-17(0)
2025-03-16(0)
2025-03-15(0)
2025-03-14(0)
2025-03-13(0)

代码天地 © 2018 codetd.com

境外服务器   最新电视剧2022