扫码关注官方微信

扫码下载APP
返回顶部
首页 > 资讯 > 前端开发 > JavaScript >Vue中父子组件通信与事件触发的深入讲解
  • 764

0
分享到

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

2024-04-02 19:04:59 764人浏览 安东尼
摘要

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

一、组件

子组件

<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父子组件通信与事件触发内容请搜索编程网以前的文章或继续浏览下面的相关文章希望大家以后多多支持编程网！

--结束END--

本文标题: Vue中父子组件通信与事件触发的深入讲解

本文链接: https://lsjlt.com/news/143453.html(转载时请注明来源链接)

有问题或投稿请发送至: 邮箱/279061341@qq.com    QQ/279061341

猜你喜欢
  • Vue中父子组件通信与事件触发的深入讲解
    目录一、组件子组件父组件二、父子组件通信父组件给子组件通信子组件向父组件通信三、父子组件事件触发父组件调用子组件中的事件方法子组件调用父组件中的事件方法四、总结一、组件 子组件 &l...
    99+
    2024-04-02
  • Vue中父子组件通信与事件触发的方法
    这篇文章主要讲解了“Vue中父子组件通信与事件触发的方法”，文中的讲解内容简单清晰，易于学习与理解，下面请大家跟着小编的思路慢慢深入，一起来研究和学习“Vue中父子组件通信与事件触发的方法”吧！一、组件子组件<template>...
    99+
    2023-06-29
  • Vue组件通信之父传子与子传父深入探究
    目录为什么要组件拆分组件拆分的流程子组件中为什么要使用defineComponent方法父传子父组件子组件子传父子组件父组件provide和inject方法传递数据的组件子组件孙子组...
    99+
    2022-12-08
    Vue组件通信几种方式 Vue组件通信实现
  • Vue组件通信之父传子与子传父详细讲解
    目录父组件传递给子组件浅谈Props子组件传递给父组件父组件传递给子组件 父组件传递给子组件：通过props属性；子组件传递给父组件：通过$emit触发事件； 这里我们知道，父组件...
    99+
    2022-11-13
    Vue组件通信 Vue组件通信父传子 Vue组件通信子传父
  • vue中怎么通过父组件点击触发子组件事件
    这期内容当中小编将会给大家带来有关vue中怎么通过父组件点击触发子组件事件，文章内容丰富且以专业的角度为大家分析和叙述，阅读完这篇文章希望大家可以有所收获。父组件app.vue<template>...
    99+
    2024-04-02
  • Vue父子组件之间事件通信示例解析
    目录前言示例解析总结前言 组件间传值的章节我们知道父组件给子组件传值的时候，使用v-bind的方式定义一个属性传值，子组件根据这个属性名去接收父组件的值，但是假如子组件想给父组件一些...
    99+
    2023-03-19
    Vue父子组件事件通信 Vue父子组件通信 Vue事件通信
  • vue中如何实现父组件触发事件改变子组件的值
    小编给大家分享一下vue中如何实现父组件触发事件改变子组件的值，相信大部分人都还不怎么了解，因此分享这篇文章给大家参考一下，希望大家阅读完这篇文章后大有收获，下面让我们一起去了解一下吧！父组件向子组件通信业...
    99+
    2024-04-02
  • 父子聊通讯：揭秘 VUE 父子组件通信的那些事儿
    父子组件通信是VUE中非常重要的一个概念，它允许父子组件之间进行数据传递和事件触发。在VUE中，父子组件通信可以通过以下几种方式实现： Props： Props是VUE中实现父子组件通信最常用的方式。它允许父组件将数据传递给子组件。 ...
    99+
    2024-02-07
    文章 VUE 父子组件通信 props $emit ref $children $parent
  • Vue父子组件之间事件通信怎么实现
    这篇“Vue父子组件之间事件通信怎么实现”文章的知识点大部分人都不太理解，所以小编给大家总结了以下内容，内容详细，步骤清晰，具有一定的借鉴价值，希望大家阅读完这篇文章能有所收获，下面我们一起来看看这篇“Vue父子组件之间事件通信怎么实现”文...
    99+
    2023-07-05
  • Vue中父子组件间怎么通信的
    本篇内容主要讲解“Vue中父子组件间怎么通信的”，感兴趣的朋友不妨来看看。本文介绍的方法操作简单快捷，实用性强。下面就让小编来带大家学习“Vue中父子组件间怎么通信的”吧!Vue父子组件什么是父子组件？在一个组件中引入另一个组件，被引入的就...
    99+
    2023-06-21
  • vue中非父子组件的通信你了解吗
    目录一、Provide和Inject二、Provide和Inject的另一种写法三、全局事件总线mitt库总结我们总结了父子组件通信方式有：props + emi...
    99+
    2024-04-02
  • 浅析Vue中父子组件间怎么通信（父传子|子传父）
    1、父组件传递给子组件⭐⭐父组件传递给子组件：通过props属性；【相关推荐：vuejs视频教程、web前端开发】子组件传递给父组件：通过$emit触发事件；  这里我们知道，父组件有一些数据需要子组件来进行展示，那我们可以通过props来...
    99+
    2022-11-22
    组件通信 组件 Vue
  • React中父子组件通信详解
    目录父组件向子组件通信存在期父组件向子组件通信 在父组件中，为子组件添加属性数据，即可实现父组件向子组件通信。传递的数据可以分成两类 子组件是作为属性来接收这些数据的 第一类就是数据...
    99+
    2024-04-02
  • Vue中怎么利用父组件向子组件通信
    今天就跟大家聊聊有关Vue中怎么利用父组件向子组件通信，可能很多人都不太了解，为了让大家更加了解，小编给大家总结了以下内容，希望大家根据这篇文章可以有所收获。props组件实例的作用域是孤立的。子组件的模板...
    99+
    2024-04-02
  • Vue组件及父子组件通信的示例分析
    这篇文章将为大家详细讲解有关Vue组件及父子组件通信的示例分析，小编觉得挺实用的，因此分享给大家做个参考，希望大家阅读完这篇文章后可以有所收获。什么是组件？vue中的组件其实就是页面组成的一部分，好比是电脑...
    99+
    2024-04-02
  • 解决父子组件通信的三种Vue插槽
    目录前言环境准备Category组件App组件一、默认插槽二、具名插槽三、作用域插槽总结 前言 插槽可以说是 Vue 中非常重要的一部分吧，在我学习和练习的过程中，当组件搭配着插槽一...
    99+
    2024-04-02
  • Vue中怎么实现非父子组件通信
    这篇文章将为大家详细讲解有关Vue中怎么实现非父子组件通信，文章内容质量较高，因此小编分享给大家做个参考，希望大家阅读完这篇文章后对相关知识有一定的了解。组件是Vue核心的一块内容，组件之间的通信也是很基本...
    99+
    2024-04-02
  • vue中怎么实现父子组件间通信
    这篇文章将为大家详细讲解有关vue中怎么实现父子组件间通信，文章内容质量较高，因此小编分享给大家做个参考，希望大家阅读完这篇文章后对相关知识有一定的了解。组件间通信（$parent $refs）父组件要想获...
    99+
    2024-04-02
  • vue中怎样实现父子组件间通信
    今天就跟大家聊聊有关vue中怎样实现父子组件间通信，可能很多人都不太了解，为了让大家更加了解，小编给大家总结了以下内容，希望大家根据这篇文章可以有所收获。建两个组件father.vue和child.vue作...
    99+
    2024-04-02
  • Vue 中怎么实现非父子组件通信
    这篇文章给大家介绍Vue 中怎么实现非父子组件通信，内容非常详细，感兴趣的小伙伴们可以参考借鉴，希望对大家能有所帮助。Vue 官网介绍了非父子组件通信方法：不过官网说的太简单了，新手看完估计还是一脸懵逼。还...
    99+
    2024-04-02
软考高级职称资格查询
热门wiki
近期文章
推荐阅读
热门问答
热门标签
编程网，编程工程师的家园，是目前国内优秀的开源技术社区之一，形成了由开源软件库、代码分享、资讯、协作翻译、讨论区和博客等几大频道内容，为IT开发者提供了一个发现、使用、并交流开源技术的平台。

  • 官方手机版

  • 微信公众号

  • 商务合作