vue__组件自定义事件绑定、解绑、触发自定义事件、父子组件之间通信

我就是我 2024-04-05 07:10 248阅读 0赞

目录

总结：

组件的自定义事件

1.一种组件间通信的方式，

2.使用场景:

3.绑定自定义事件:

4.触发自定义事件:this.$emit(‘atguigu’,数据)

5.解绑自定义事件 this.$off(‘atguigu’)

6.组件上也可以绑定原生DOM事件，需要使用native修饰符

7.注意:通过this.$refs.xxx.$on(‘atguigu，回调)

一、组件自定义事件绑定

方式一

方式二

结果：方式一和方式二的最终结果是一个样子的

二、组件自定义事件解绑

#

总结：

组件的自定义事件

1.一种组件间通信的方式，

适用于:子组件===>父组件

2.使用场景:

A是父组件，B是子组件，B想给A传数据，那么就要在A中给B绑定自定义事件(事件的回调在A中)。

3.绑定自定义事件:

①第一种方式，

在父组件中: 或

②第二种方式，在父组件中:

…..
mounted(){
this.$refs.xxx.$on(‘atguigu’,this.test)}

③若想让自定义事件只能触发一次，

可以使用once修饰符，或$once方法。

this.$refs.student.$once('atguigu',this.getStudentName)

4.触发自定义事件:this.$emit(‘atguigu’,数据)

5.解绑自定义事件 this.$off(‘atguigu’)

6.组件上也可以绑定原生DOM事件，需要使用native修饰符

7.注意:通过this.$refs.xxx.$on(‘atguigu，回调)

绑定自定义事件时，回调要么配置在methods中，要么用箭头函数，否则this指向会出问题!

一、组件自定义事件绑定

方式一

app.vue

<template>
  <div class="app">
    <h1>{
   {msg}}</h1>
    <!-- 通过父组件给子组件绑定一个自定义事件实现：子给父传递数据(第一种写法：使用@或v-on) -->
    <!-- v-on在student标签上，所以给这个组件的vc身上绑定一个事件atguigu，如果触发了这个事件，demo函数就会调用 -->
    <Student  v-on:atguigu="getStudentName"></Student>
  </div>
</template>
<script>
     // 引入组件
     import School  from './components/School' 
     import Student  from './components/Student'
     export default {
       name:'App',
       data(){
         return{
          msg:'你好啊！'
         }
       },
      //  注册组件
       components:{
         School,
         Student,
       },
       methods:{
        // 不论传过来多少个参数，第一个参数赋值给name，剩下的参数在params数组中
        getStudentName(name,...params){
          console.log('App收到了学生名',name)
        }
       },
</script>
<style scoped>
    .app{
      background-color:gray ;
      padding: 5px;
    }
</style>

student.vue

<template>
<!-- <template>标签不参与编译，在页面展现的是下面的一段结构 -->
     <!-- 组件结构 -->
     <div class="student">
        <h2 > 学生名称：{
   {name}}</h2>
        <h2> 学生年龄：{
   {age}}</h2>
        <h2> 学生性别：{
   {sex}}</h2>
        <button @click="sendStudentName">把学生的名字给App</button>
     </div>
</template>
 <script>
        export default {
            name:'Student',
            data(){
                return{
                 name:'张三',
                 sex:'男',
                 age:18
                }
            },
            methods:{
                // 触发Student组件身上的atguigu事件
                sendStudentName(){
                    // 这里的this指向vc
                    // emit 爆发的含义
                    // 注意！！这个地方要写事件名和传入的参数
                    this.$emit('atguigu',this.name)
                }
            }
        }  
</script>
<style scoped>
      .student{
        background-color: red;
        padding:5px;
        margin-top:30px;
      }
</style>

方式二

<template>
  <div class="app">
    <h1>{
   {msg}}</h1>
    <!-- 通过父组件给子组件绑定一个自定义事件实现：子给父传递数据(第二种写法：使用ref) -->
    <Student ref="student"/>
  </div>
</template>
<script>
     // 引入组件
     import School  from './components/School' 
     import Student  from './components/Student'
     export default {
       name:'App',
       data(){
         return{
          msg:'你好啊！'
         }
       },
      //  注册组件
       components:{
         School,
         Student,
       },
       methods:{
        // 不论传过来多少个参数，第一个参数赋值给name，剩下的参数在params数组中
        getStudentName(name,...params){
          console.log('App收到了学生名',name)
        }
       },
      //  挂载完毕
       mounted(){
        // this.$refs.student获取真实的DOM元素
        // $on可以理解为当....时候  $on('atguigu')当atguigu事件被触发的时候
          this.$refs.student.$on('atguigu',this.getStudentName)
          // 下面这个只能触发一次
          // this.$refs.student.$once('atguigu',this.getStudentName)
       }
      }
</script>
<style scoped>
    .app{
      background-color:gray ;
      padding: 5px;
    }
</style>
<template>
<!-- <template>标签不参与编译，在页面展现的是下面的一段结构 -->
     <!-- 组件结构 -->
     <div class="student">
        <h2 > 学生名称：{
   {name}}</h2>
        <h2> 学生年龄：{
   {age}}</h2>
        <h2> 学生性别：{
   {sex}}</h2>
        <button @click="sendStudentName">把学生的名字给App</button>
     </div>
</template>
 <script>
        export default {
            name:'Student',
            data(){
                return{
                 name:'张三',
                 sex:'男',
                 age:18
                }
            },
            methods:{
                // 触发Student组件身上的atguigu事件
                sendStudentName(){
                    // 这里的this指向vc
                    // emit 爆发的含义
                    // 注意！！这个地方要写事件名和传入的参数
                    this.$emit('atguigu',this.name)
                }
            }
        }  
</script>
<style scoped>
      .student{
        background-color: red;
        padding:5px;
        margin-top:30px;
      }
</style>

结果：方式一和方式二的最终结果是一个样子的

二、组件自定义事件解绑

<template>
<!-- <template>标签不参与编译，在页面展现的是下面的一段结构 -->
     <!-- 组件结构 -->
     <div class="student">
        <h2 > 学生名称：{
   {name}}</h2>
        <h2> 学生年龄：{
   {age}}</h2>
        <h2> 学生性别：{
   {sex}}</h2>
        <button @click="sendStudentName">把学生的名字给App</button>
        <button @click="unbind">解绑atguigu事件</button>
     </div>
</template>
 <script>
        export default {
            name:'Student',
            data(){
                return{
                 name:'张三',
                 sex:'男',
                 age:18
                }
            },
            methods:{
                // 触发Student组件身上的atguigu事件
                sendStudentName(){
                    // 这里的this指向vc
                    // emit 爆发的含义
                    // 注意！！这个地方要写事件名和传入的参数
                    this.$emit('atguigu',this.name)
                },
                unbind(){
                    // 这个语句只能解绑一个自定义事件
                    this.$off('atguigu')
                    //  this.$off(['atguigu','demo']) 解绑多个事件，有几个事件，就往里面写几个事件
                    // this.$off() 解绑所有的自定义事件
                }
            }
        }  
</script>
<style scoped>
      .student{
        background-color: red;
        padding:5px;
        margin-top:30px;
      }
</style>

当我们解绑后，无论点多少次“把学生的名字给App”都不会管用

发表评论取消回复

表情：

评论列表（有 0 条评论，248人围观）

还没有评论，来说两句吧...

相关阅读

相关 vue__组件自定义事件绑定、解绑、触发自定义事件、父子组件之间通信

目录总结：组件的自定义事件 1.一种组件间通信的方式， 2.使用场景: 3.绑定自定义事件: 4.触发自定义事件:this.$emit('atguig

我就是我/ 2024年04月05日 07:10/ 0 赞/ 249 阅读

相关 Vue03基础语法--Vue组件+样式绑定+修饰符+常用控件+自定义指令+自定义事件

[14天阅读挑战赛][14] 努力是为了不平庸~ 目录 1.样式绑定 2. 事件修饰符 3. 按键修饰符 4. 常用控件 4.1 常用控件示例 4.2 修

我不是女神ヾ/ 2024年04月01日 08:40/ 0 赞/ 220 阅读

相关 Vue-组件自定义事件(绑定和解绑)

组件自定义事件(绑定) 像click,change这些都是js的内置事件，我们可以直接使用，本次我们学习自己根据需求打造全新的事件，但是js内置的是给html元素用的,本

分手后的思念是犯贱/ 2023年10月12日 19:36/ 0 赞/ 225 阅读

相关 21-绑定自定义事件

绑定自定义事件一、利用自定义事件获取子组件的值父组件给子组件绑定一个自定义事件，实际上是绑定到了子组件的实例对象vc上： <!-- 自定义myEven

旧城等待，/ 2023年10月08日 18:07/ 0 赞/ 197 阅读

相关 vue 自定义组件使用v-model，实现父子组件之间双向绑定

父组件中引入子组件 <loongValidate v-model="diskDistri"></loongValidate> 子组件中 <input v-

待我称王封你为后i/ 2023年07月24日 08:31/ 0 赞/ 134 阅读

相关 JavaScript自定义函数——bind()事件绑定

直接拿走，兼容IE8 / 指定元素绑定响应函数 @param obj 绑定事件的对象 @param eventSt

深碍√TFBOYSˉ_/ 2023年02月16日 15:27/ 0 赞/ 149 阅读

相关事件绑定、事件传播、事件捕获、事件冒泡、自定义事件

DOM事件三种级别 DOM0级事件 DOM0 级时间分两种，一是直接在标签内直接添加执行语句，二是定义执行函数。 <input type="text" id

布满荆棘的人生/ 2022年12月18日 05:56/ 0 赞/ 483 阅读

相关 Vue.js 组件中的v-on绑定自定义事件理解

每个 Vue 实例都实现了事件接口(Events interface)，即：使用 `$on(eventName)` 监听事件使用 `$emit(eventName)`

小灰灰/ 2022年09月26日 15:00/ 0 赞/ 252 阅读

相关 vue中父子组件绑定事件

父子组件绑定事件：注意：父组件是自定义事件，由子组件传递触发事件信息；子组件是系统事件比如：click等 <div id="app"> <c

柔光的暖阳◎/ 2022年04月16日 01:23/ 0 赞/ 562 阅读

相关 Vue.js组件通信之自定义事件

组件通信从父组件向子组件通信，通过props传递数据就可以了，但Vue组件通信的场景不止有这一种，归纳起来，组件之间的通信可以用下图来表示： ![在这里插入图片描述

╰+攻爆jí腚メ/ 2021年08月13日 21:42/ 0 赞/ 607 阅读