Vue父子组件通讯方式及实现方法

更新时间：2023年06月25日 11:12:54 作者：前端每日三省

这篇文章主要介绍了Vue父子组件通讯方式及实现方法，文中通过代码示例介绍的非常详细，对我们的学习或工作有一定的帮助，感兴趣的同学可以参考阅读下

Vue父子组件通讯方式及实现

1. props和$emit

父组件通过props向子组件传递数据，子组件通过$emit触发父组件定义的事件来传递数据。

父组件：

<template>
  <div>
    <child-component :message="message" @update-message="updateMessage"></child-component>
  </div>
</template>
<script>
import ChildComponent from './ChildComponent.vue';
export default {
  name: 'ParentComponent',
  components: {
    ChildComponent
  },
  data() {
    return {
      message: 'Hello World!'
    }
  },
  methods: {
    updateMessage(newMessage) {
      this.message = newMessage;
    }
  }
}
</script>

子组件：

<template>
  <div>
    <p>{{ message }}</p>
    <button @click="updateMessage">Update Message</button>
  </div>
</template>
<script>
export default {
  name: 'ChildComponent',
  props: ['message'],
  methods: {
    updateMessage() {
      this.$emit('update-message', 'New Message');
    }
  }
}
</script>

2. $parent和$children

父组件可以通过$children属性获取到所有子组件的实例，并通过$parent属性获取到自己的父组件实例。

父组件：

<template>
  <div>
    <child-component></child-component>
  </div>
</template>
<script>
import ChildComponent from './ChildComponent.vue';
export default {
  name: 'ParentComponent',
  components: {
    ChildComponent
  },
  methods: {
    updateMessage(newMessage) {
      this.message = newMessage;
    }
  }
}
</script>

子组件：

<template>
  <div>
    <p>{{ message }}</p>
    <button @click="updateMessage">Update Message</button>
  </div>
</template>
<script>
export default {
  name: 'ChildComponent',
  data() {
    return {
      message: 'Hello World!'
    }
  },
  methods: {
    updateMessage() {
      this.$parent.updateMessage('New Message');
    }
  }
}
</script>

3. $refs

父组件可以通过ref属性给子组件设置一个引用，然后通过$refs获取到子组件的实例，从而调用子组件的方法或者访问子组件的属性。

父组件：

<template>
  <div>
    <child-component ref="child"></child-component>
  </div>
</template>
<script>
import ChildComponent from './ChildComponent.vue';
export default {
  name: 'ParentComponent',
  components: {
    ChildComponent
  },
  methods: {
    updateMessage() {
      this.$refs.child.updateMessage('New Message');
    }
  }
}
</script>

子组件：

<template>
  <div>
    <p>{{ message }}</p>
    <button @click="updateMessage">Update Message</button>
  </div>
</template>
<script>
export default {
  name: 'ChildComponent',
  data() {
    return {
      message: 'Hello World!'
    }
  },
  methods: {
    updateMessage(newMessage) {
      this.message = newMessage;
    }
  }
}
</script>

到此这篇关于Vue父子组件通讯方式及实现方法的文章就介绍到这了,更多相关Vue父子组件通讯内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！

您可能感兴趣的文章:

vue在手机中通过本机IP地址访问webApp的方法
这篇文章主要介绍了vue在手机中通过本机IP地址访问webApp的方法,需要的朋友可以参考下
2018-08-08
Vue插值、表达式、分隔符、指令知识小结
这篇文章主要介绍了Vue插值、表达式、分隔符、指令的相关知识，文中给大家提到了去除vue插值表达式{{}}的方法,需要的朋友可以参考下
2018-10-10
vue实现导航栏下拉菜单
这篇文章主要为大家详细介绍了vue实现导航栏下拉菜单，带展开收缩动画，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2022-09-09
vue中前端如何实现pdf预览功能(含vue-pdf插件用法)
这篇文章主要给大家介绍了vue中前端如何实现pdf预览功能的相关资料,文中包含vue-pdf插件用法,在前端开发中,很多时候我们需要进行pdf文件的预览操作,需要的朋友可以参考下
2023-07-07
Vue生命周期深入分析总结
Vue的生命周期就是vue实例从创建到销毁的全过程,也就是new Vue() 开始就是vue生命周期的开始。Vue 实例有⼀个完整的⽣命周期,也就是从开始创建、初始化数据、编译模版、挂载Dom -> 渲染、更新 -> 渲染、卸载等⼀系列过程,称这是Vue的⽣命周期
2022-08-08
vue实现的双向数据绑定操作示例
这篇文章主要介绍了vue实现的双向数据绑定操作,结合完整实例形式较为详细的分析了vue.js进行数据双向绑定操作的常见实现方法与相关操作技巧,需要的朋友可以参考下
2018-12-12
element tooltip的使用
本文主要介绍了element tooltip的使用，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
2023-02-02
iview form清除校验状态的实现
这篇文章主要介绍了iview form清除校验状态的实现，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
2019-09-09
基于Vue如何封装分页组件
使用Vue做双向绑定的时候，可能经常会用到分页功能，接下来通过本文给大家分享一个封装分页组件的方法，一起看看吧
2016-12-12
详解Vue路由History mode模式中页面无法渲染的原因及解决
这篇文章主要介绍了详解Vue路由History mode模式中页面无法渲染的原因及解决，非常具有实用价值，需要的朋友可以参考下
2017-09-09