Vue中父子组件通信与事件触发的深入讲解

目录
  • 一、组件
    • 子组件
    • 父组件
  • 二、父子组件通信
    • 父组件给子组件通信
    • 子组件向父组件通信
  • 三、父子组件事件触发
    • 父组件调用子组件中的事件方法
    • 子组件调用父组件中的事件方法
  • 四、总结

一、组件

子组件

<template>
  <div style="border:1px solid black;width:400px; height: 130px;">
    <h3>我是子组件</h3>
    <button>子组件将值传递给父组件</button>
    <div>子组件接收父组件的值:</div>
  </div>
</template> 

父组件

<template>
 <div style="border:1px solid red;padding:2rem;width:400px;margin:0 auto;">
    <h3>我是父组件</h3>
    <div>子组件向父组件传递的值:</div>
    <Child></Child>
  </div>
</template>

<script>
import Child from './Child';
export default {
    components: {
        Child
    }
}
</script>

效果展示:

通过这张图可以看出父子组件的结构,下面我们来实习父子组件通信。

二、父子组件通信

父组件给子组件通信

实现思路:子组件通过 props 来接受父组件传过来的值。

  • 在父组件中,定义一个data变量,在子组件标签中动态绑定这个值。

    // Father.vue
    <template>
     <div style="border:1px solid red;padding:2rem;width:400px;margin:0 auto;">
        <h3>我是父组件</h3>
        <div>子组件向父组件传递的值:{{ChildMsg}}</div>
        <Child :FatherMsg="data"></Child>
      </div>
    </template>
    
    <script>
    import Child from './Child';
    export default {
        data() {
            return {
                data: 'I am your father',
            }
        },
        components: {
            Child
        }
    }
    </script>
  • 接着在子组件里通过 props 来接收,这样子组件就接收到了父组件传递过来的值了。
    // Child.vue
    <template>
      <div style="border:1px solid black;width:400px; height: 130px;">
        <h3>我是子组件</h3>
        <button>子组件将值传递给父组件</button>
        <div>父组件向子组件传递的值:{{FatherMsg}}</div>
      </div>
    </template> 
    
    <script>
    export default {
        data() {
            return {
                data: 'I am your children',
            }
        },
        props: ['FatherMsg']
    }
    </script>

可以看到,我们父组件向子组件通信已经实现了,接下来就是子组件向父组件通信了,这个就要使用到 this.$emit 方法了。

子组件向父组件通信

实现思路:通过在子组件中使用 this.$emit 来触发自定义事件并传值,然后在父组件中监听该事件即可。

  • 在子组件中给 button 按钮添加 click 事件,来通过 this.$emit 自定义事件,并传入一个参数:

    <template>
      <div style="border:1px solid black;width:400px; height: 130px;">
        <h3>我是子组件</h3>
        <button @click="send">子组件将值传递给父组件</button>
        <div>父组件向子组件传递的值:{{FatherMsg}}</div>
      </div>
    </template> 
    
    <script>
    export default {
        data() {
            return {
                data: 'I am your children',
            }
        },
        props: ['FatherMsg'],
        methods: {
          send() {
            this.$emit('ListenChild', this.data);
          }
        }
    }
    </script>
  • 在父组件中的子组件标签里,先在 data 里定义一个变量接收这个值,然后监听在子组件中自定义的事件,并接受这个参数赋值给定义的变量:
    <template>
     <div style="border:1px solid red;padding:2rem;width:400px;margin:0 auto;">
        <h3>我是父组件</h3>
        <div>子组件向父组件传递的值:{{ChildMsg}}</div>
        <Child :FatherMsg="data" @ListenChild="ListenChild"></Child>
      </div>
    </template>
    
    <script>
    import Child from './Child';
    export default {
        data() {
            return {
                data: 'I am your father',
                ChildMsg: '',
            }
        },
        components: {
            Child
        },
        methods: {
            ListenChild(data) {
                console.log("子组件传递过来的值:" , data);
                this.ChildMsg = data;
            }
        }
    }
    </script>

点击子组件中的“子组件将值传递给父组件”,就可看到如下效果:

三、父子组件事件触发

父组件调用子组件中的事件方法

  • 通过 ref 直接调用子组件的方法:

    // Child.vue
    <template>
      <div style="border: 1px solid black; width: 150px; margin: 10px auto">
        我是子组件
        <div style="color: red"> {{ msg }} </div>
      </div>
    </template>
    <script>
    export default {
        data() {
            return {
                msg: '',
            }
        },
      methods: {
        childFun() {
          console.log('我是子组件的方法 childFun');
          this.msg = '我的方法被调用了'
        },
      },
    };
    </script>

    在子组件标签上添加 ref 属性,然后在方法中通过 this.$refs 找到绑定 ref 的属性调用该子组件内的方法即可。

    // Father.vue
    <template>
      <div style="border: 1px solid red; width: 200px; padding: 10px; margin: 0 auto">
        我是父组件
        <Button @click="handleClick">点击调用子组件方法</Button>
        <Child ref="child" />
      </div>
    </template>    
    
    <script>
    import Child from './Child';
    
    export default {
        components: {
            Child
        },
        methods: {
            handleClick() {
                this.$refs.child.childFun();
            },
        },
    }
    </script>
  • 通过组件的 $emit$on 方法:
    // Child.vue
    <template>
      <div style="border: 1px solid black; width: 150px; margin: 10px auto">
        我是子组件
        <div style="color: red"> {{ msg }} </div>
      </div>
    </template>
    <script>
    export default {
        data() {
            return {
                msg: '',
            }
        },
      mounted() {
        this.$on('childFun', function() {
            console.log('我是子组件方法');
            this.msg = '我的方法被调用了'
        });
      }
    };
    </script>

    在子组件中使用 $on 绑定一个方法,然后在父组件中通过 $emit 找到绑定 $on 上面的事件名即可,但是也需要 ref 的配合。

    // Father.vue
    <template>
      <div style="border: 1px solid red; width: 200px; padding: 10px; margin: 0 auto">
        我是父组件
        <Button @click="handleClick">点击调用子组件方法</Button>
        <Child ref="child" />
      </div>
    </template>    
    
    <script>
    import Child from './Child';
    
    export default {
        components: {
            Child
        },
        methods: {
            handleClick() {
            	//子组件$on中的名字
                this.$refs.child.$emit("childFun")
            },
        },
    }
    </script>

两种实现方式效果一致。

调用方法前:

调用方法后:

子组件调用父组件中的事件方法

  • 直接在子组件中通过 this.$parent 来调用父组件的方法

    // Father.vue
    <template>
      <div style="border: 1px solid red; width: 200px; padding: 10px; margin: 0 auto" >
        我是父组件
        <Child></Child>
        <div style="color: red"> {{ msg }} </div>
      </div>
    </template>
    <script>
      import Child from './Child';
      export default {
          data() {
              return {
                  msg: ''
              }
          },
        components: {
          Child
        },
        methods: {
          fatherMethod() {
            console.log('我的父组件中的方法');
            this.msg = '我的方法被子组件调用了';
          }
        }
      };
    </script>
    // Child.vue
    <template>
      <div style="border: 1px solid black; width: 150px; margin: 10px auto">
        我是子组件
        <button @click="childMethod">点击调用父组件方法</button>
      </div>
    </template>
    <script>
      export default {
        methods: {
          childMethod() {
            this.$parent.fatherMethod();
          }
        }
      };
    </script>
  • 在子组件里用 $emit 向父组件触发一个事件,父组件监听这个事件(推荐使用)
    // Father.vue
    <template>
      <div style="border: 1px solid red; width: 200px; padding: 10px; margin: 0 auto" >
        我是父组件
        <Child @fatherMethod="fatherMethod"></Child>
        <div style="color: red"> {{ msg }} </div>
      </div>
    </template>
    <script>
      import Child from './Child';
      export default {
          data() {
              return {
                  msg: ''
              }
          },
        components: {
          Child
        },
        methods: {
          fatherMethod() {
            console.log('我的父组件中的方法');
            this.msg = '我的方法被子组件调用了';
          }
        }
      };
    </script>

    子组件可以使用 $emit 触发父组件的自定义事件。

    // Child.vue
    <template>
      <div style="border: 1px solid black; width: 150px; margin: 10px auto">
        我是子组件
        <button @click="childMethod">点击调用父组件方法</button>
      </div>
    </template>
    <script>
      export default {
        methods: {
          childMethod() {
            // fatherMethod父组件方法
            this.$emit('fatherMethod');
          }
        }
      };
    </script>
  • 父组件把方法传入子组件中,在子组件里直接调用这个方法:
    // Father.vue
    <template>
      <div style="border: 1px solid red; width: 200px; padding: 10px; margin: 0 auto" >
        我是父组件
        <Child :fatherMethod="fatherMethod"></Child>
        <div style="color: red"> {{ msg }} </div>
      </div>
    </template>
    <script>
      import Child from './Child';
      export default {
          data() {
              return {
                  msg: ''
              }
          },
        components: {
          Child
        },
        methods: {
          fatherMethod() {
            console.log('我的父组件中的方法');
            this.msg = '我的方法被子组件调用了';
          }
        }
      };
    </script>

    父组件可以将事件绑定到子组件标签上,子组件使用 props 接收父组件的事件。

    // Child.vue
    <template>
      <div style="border: 1px solid black; width: 150px; margin: 10px auto">
        我是子组件
        <button @click="childMethod">点击调用父组件方法</button>
      </div>
    </template>
    <script>
      export default {
        props: {
          fatherMethod: {
            type: Function,
            default: null
          }
        },
        methods: {
          childMethod() {
            if (this.fatherMethod) {
              this.fatherMethod();
            }
          }
        }
      };
    </script>

以上三种实现方式效果一致。

调用方法前:

调用方法后:

四、总结

至此,Vue 父子组件之间大部分的操作都涉及到了,我们在程序的开发过程中对于该部分内容可以游刃有余了。

到此这篇关于Vue中父子组件通信与事件触发的文章就介绍到这了,更多相关Vue父子组件通信与事件触发内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们!

(0)

相关推荐

  • vue2.0父子组件及非父子组件之间的通信方法

    1.父组件传递数据给子组件 父组件数据如何传递给子组件呢?可以通过props属性来实现 父组件: <parent> <child :child-msg="msg"></child>//这里必须要用 - 代替驼峰 </parent> data(){ return { msg: [1,2,3] }; } 子组件通过props来接收数据: 方式1: props: ['childMsg'] 方式2 : props: { childMsg: Arr

  • vue之父子组件间通信实例讲解(props、$ref、$emit)

    组件是 vue.js 最强大的功能之一,而组件实例的作用域是相互独立的,这就意味着不同组件之间的数据无法相互引用.那么组件间如何通信,也就成为了vue中重点知识了.这篇文章将会通过props.$ref和 $emit 这几个知识点,来讲解如何实现父子组件间通信. 在说如何实现通信之前,我们先来建两个组件father.vue和child.vue作为示例的基础. //父组件 <template> <div> <h1>我是父组件!</h1> <child>

  • vue中的$emit 与$on父子组件与兄弟组件的之间通信方式

    本文主要对vue 用$emit 与 $on 来进行组件之间的数据传输. 主要的传输方式有三种: 1.父组件到子组件通信 2.子组件到父组件的通信 3.兄弟组件之间的通信 一.父组件传值给子组件 父组件给子组件传子,使用props //父组件:parent.vue <template> <div> <child :vals = "msg"></child> </div> </template> <script&

  • 基于vue 兄弟组件之间事件触发(详解)

    直奔主题! 兄弟组件之间的事件触发,大概思路是通过父级组件交换数据,watch来监听触发事件. 场景是父级组件A同时引用两个子级组件B,C.点击B组件中的按钮执行C组件中的事件. 第一步:父级组件A <bottom-play :play="playStatus" @playStatus="btmChild"></bottom-play> methods:{ listChild:function(val){//B组件自定义事件 状态是布尔值 t

  • vue中组件通信详解(父子组件, 爷孙组件, 兄弟组件)

    vue中我们常常用到组件. 那么组件总体可以分为如下的几种关系. 父子组件, 爷孙组件, 兄弟组件. 这几种组件之间是如何通信的呢? 父子组件通信 根据vue中的文档可知, 组件的props属性用于接收父组件传递的信息. 而子组件想要向父组件传递信息, 可以使用$emit事件. 我们定义两个组件, 一个为父组件名为father, 另外一个为子组件child. 子组件通过props属性接收父组件传递的值, 这个值为fname, 是父组件的名字. 点击子组件的按钮, 触发toFather事件, 向父

  • vue项目中v-model父子组件通信的实现详解

    前言 我们在vue项目中,经常有这样的需求,父组件绑定v-model,子组件输入更改父组件v-model绑定的数值.很多朋友对这种操作不是很清楚,这需要对v-model有比较深入的了解,今天谈谈v-model. vue的双向数据绑定 v-model这个指令只能用在<input>, <select>,<textarea>这些表单元素上,所谓双向绑定,指的就是我们在js中的vue实例中的data与其渲染的dom元素上的内容保持一致,两者无论谁被改变,另一方也会相应的更新为相

  • vue 组件之间事件触发($emit)与event Bus($on)的用法说明

    组件之间事件触发 之前使用组件,并不是很频繁,是水平的问题,目前工作中,公司大佬带着我手写过一个组件,再此很感谢他的指导.目前简单的组件已经有了自己的逻辑思维,正在从低级码农向中级码农蜕变.废话不多说.上图看看组件情况. 新增按钮组件: 操作按钮组合组件: 此时有个需求就是,无论是哪个按钮,如果改变了列表中的数据,列表需要实时更新数据. 此时就需要用到组件间的事件触发. 父子组件之间事件触发可以使用$emit $emit的使用方法如下: 在子组件中,写一个click点击事件.比如: cancel

  • Vue中父子组件通信与事件触发的深入讲解

    目录 一.组件 子组件 父组件 二.父子组件通信 父组件给子组件通信 子组件向父组件通信 三.父子组件事件触发 父组件调用子组件中的事件方法 子组件调用父组件中的事件方法 四.总结 一.组件 子组件 <template> <div style="border:1px solid black;width:400px; height: 130px;"> <h3>我是子组件</h3> <button>子组件将值传递给父组件</

  • Vue.js 父子组件通信的十种方式

    面试官:Vue 中父子组件通信有哪些方式? 自己先想一分钟. 无可否认,现在无论大厂还是小厂都已经用上了Vue.js 框架,简单易上手不说,教程详尽,社区活跃,第三方套件还多.真的是前端开发人员必备技能.而且在面试当中也往往会问到关于 Vue 方面的各种问题,其中大部分面试官会问到如上这种问题. 最近一直在做 Vue项目代码层面上的优化,说实话,优化别人的代码真是件痛苦的事情,功能实现尚且不说,就说代码规范我就能再写出一篇文章来.真的是无规范不成方圆,规范这个东西太重要了!有点扯了,回到主题,咳

  • 如何用Vue实现父子组件通信

    一.父子组件的关系构成 本篇文章将要总结的是Vue中父子组件之间的通信方式. 那在vue中父子组件之间的关系是怎么构成的呢,或者说哪个组件可以称为是父组件,哪个组件又可以称为是子组件呢. 在我的理解中,父子组件的关系构成也比较简单. 使用vue-cli工具构建的项目中,我们经常会在一个组件中注册引用另外一个组件. Home.vue <template> <div class="home"> <p>这里是Home组件</p> </di

  • vue非父子组件通信问题及解决方法

    问题描述: 最近在做登录部分时遇到一个场景,当点击 "用户"按钮时,首先渲染login组件,在用户登录后直接跳转到用户信息界面(user组件).这里遇到了需要将login组件通过异步请求获得的用户信息传向 user组件,但是login和login组件不是父子组件,就暂称为兄弟组件吧. 简而言之,我要解决的就是兄弟组件之间的信息传递问题. //位于login.vue 中 export default { methods:{ login(){ this.$axios({ method: '

  • vue中父子组件的参数传递和应用示例

    1.在父组件中调用子组件,父亲传值给子组件 子组件如下,把要传给给父亲的值放在props中 template> <!--底部导航--> <div class="index-bbar"> <ul class="flex" > <li v-for="(item,index) in liAry" :class="index==licurrent?'active':''"> <

  • vue.js父子组件通信动态绑定的实例

    如下所示: <!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title></title> </head> <body> <div id='app'> <!--这里的作用是将父组件渲染到页面上--> <father></father> </d

  • vue中父子组件注意事项,传值及slot应用技巧

    一.父子组件传值 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>父子组件传值</title> <style> </style> <script src="./vue.js"></script> </head> <bod

  • Vue中父子组件的值传递与方法传递

    一.Vue中父组件向子组件传值 利用v-bind向子组件传值,子组件中利用props接受 <div id="app"> <father></father> </div> <template id="father"> <div> <!--注意点: 组件是可以使用自己的数据的--> <p>{{name}}</p> <p>{{age}}</p>

  • React中父子组件通信详解

    目录 父组件向子组件通信 存在期 父组件向子组件通信 在父组件中,为子组件添加属性数据,即可实现父组件向子组件通信.传递的数据可以分成两类 子组件是作为属性来接收这些数据的 第一类就是数据:变量,对象,属性数据,状态数据等等 这些数据发生改变,子组件接收的属性数据就发生了改变. 第二类就是方法:父组件可以向子组件传递属性方法,子组件接收方法,并可以在组件内执行,有两种执行方式 注意:父组件传给子组件的方法是不能执行的,执行了相当于将方法的返回值传递给子组件. 第一种 作为事件回调函数执行 参数默

  • Vue中父子组件通讯之todolist组件功能开发

    一.todolist功能开发 <div id="root"> <div> <input type="text" v-model="inputValue"> <button @click="handleSubmit">提交</button> </div> <ul> <li v-for="(item, index ) of list

随机推荐