vue:父子组件之间通信

简介: 父子组件通信的简单小实例

在 Vue 中,父子组件的关系可以总结为 prop 向下传递,事件向上传递。父组件通过 prop 给子组件下发数据,子组件通过事件给父组件发送消息。看看它们是怎么工作的。
image
其实很简单,先看下目录
image
先来看看开始的页面
image
发送和接收的结果
image
父组件通过props向下发送数据,先上代码看看

  <div id="parent">
    <div class="value">父組件接收到的值 {{total}}</div>
    <button @click='props'>props发送</button>
    <child @increment='incremnetTotal' :message="msg" :information="project"></child>
    
  </div>
</template>

<script>

import child from './child'

export default {
  components:{
     child
  },
  data () {
    return {
      total:0,
      msg:"my name is gsben",
      project:[]
    }
  },
  methods:{
     incremnetTotal:function(data){  //接收子组件的值
        this.total+=1;
        alert(data);
        console.log(data);
     },
     props(){   //传递到子组件的信息
        var aa = {'a':6};
        this.project = aa;
     }
  }
}
</script>

<style>
   #parent{
     text-align: center;
     margin: 0 auto;
     width: 260px;
     height: 60px;
     border: solid red 1px;
   }
</style>

父组件传递的参数是在子组件标签上的

image
其实父组件带给子组件的信息就msgproject,绑定的messageinformation是父组件自定义的名字,可以自己决定,但是在子组件接收数据时,名字必须是messageinformation
image
就仅仅是一个props就能接收到了,而且props和data一样,limai里面的数据都是可以在模板中直接使用的,很方便,messageinformation既可以是字符串也可以是数组和对象,是不是很简单,只是一个props就可以了。

子组件传递父组件呢?
他的传递方式也很简单,通过一个$emit事件即可。
image
$emit的第一个参数是事件名,在父组件那边也要有这个名字才能通信,第二个参数是数据,里面什么类型的数据都可以放。
父组件的接收
image
箭头是接收的事件名,必须一致,圆圈是自定义的事件名,在methods可以处理获取的相关数据。

这就是父子组件通信的小例子。具体的官方文档父子组件通信,想要源码github

目录
相关文章
|
17小时前
|
设计模式 JavaScript 前端开发
Vue源码学习需要哪些工具和技能
【4月更文挑战第20天】学习Vue源码需具备的工具与技能:VS Code或WebStorm作为代码编辑器,Node.js与npm管理依赖,Git操作仓库。基础包括JavaScript、ES6+语法、前端知识(HTML/CSS/浏览器原理)及Vue基础知识。进阶则需源码阅读理解能力,调试技巧,熟悉设计模式和架构思想。学习方法强调系统学习、实践与持续关注Vue最新动态。
15 8
|
17小时前
|
JavaScript 前端开发 编译器
Vue 源码学习路线
【4月更文挑战第20天】探索Vue源码涉及响应式系统、虚拟DOM、模板编译等核心概念。先掌握Vue基础知识、JavaScript(ES6+)和前端工程化。从源码入口文件开始,研究响应式、虚拟DOM、模板编译、实例方法、全局API及生命周期。理解编译器和渲染器工作原理,实践编写Vue插件,参与开源项目,阅读相关文章教程,持续关注Vue最新动态。这是一个循序渐进、需要耐心和实践的过程。
6 1
|
1天前
|
JavaScript 前端开发 内存技术
Vue入门:构建你的第一个Vue应用程序
【4月更文挑战第22天】Vue.js 入门教程:安装 Node.js 和 npm,使用 Vue CLI (`npm install -g @vue/cli`) 创建项目,选择预设或自定义配置。在 `src/components/` 创建 `HelloWorld.vue` 组件,显示数据属性。在 `App.vue` 中引入并注册组件,启动开发服务器 (`npm run serve`) 预览。开始你的 Vue 之旅!
|
4天前
|
JavaScript
Ant design Vue 父子组件传递(代码案例--不懂的地方可以私信本博主)
Ant design Vue 父子组件传递(代码案例--不懂的地方可以私信本博主)
9 0
|
4天前
|
JavaScript 前端开发
ant design vue 配置菜单外部打开
ant design vue 配置菜单外部打开
10 0
|
4天前
|
JavaScript
ant design vue 在列表中使用插槽 例如当性别为0的时候在列表中我想显示男
ant design vue 在列表中使用插槽 例如当性别为0的时候在列表中我想显示男
7 0
|
4天前
|
JavaScript 前端开发
vue 实现在线预览PDFpdf文件
vue 实现在线预览PDFpdf文件
15 0
|
4天前
|
JavaScript
vue下拉列表
vue下拉列表
8 0
vue下拉列表
|
4天前
|
JavaScript 前端开发 API
vue与jqyery的区别
vue与jqyery的区别
|
JavaScript
Vue父子组件传值(porvide+inject实现组件通信)
如果我们需要把父组件的值传递给子组件,而且子组件可能存在层层嵌套,那么就可以使用provide+inject的方法来实现组件之间的通信
158 0
Vue父子组件传值(porvide+inject实现组件通信)