父子组件传值原理图

一般页面的视图App.vue应为这样

一.父组件向子组件传值

1.创建子组件，在src/components/文件夹下新建一个Child.vue
2.Child.vue的中创建props，然后创建一个名为message的属性

3.在App.vue中注册Child组件，并在template中加入child标签，标签中添加message属性并赋值

4.保存修改的文件，查看浏览器

5.我们依然可以对message的值进行v-bind动态绑定

此时浏览器中

父组件向子组件传值成功
总结一下：

  • 子组件在props中创建一个属性，用以接收父组件传过来的值
  • 父组件中注册子组件
  • 在子组件标签中添加子组件props中创建的属性
  • 把需要传给子组件的值赋给该属性

二.子组件向父组件传值

1.在子组件中创建一个按钮，给按钮绑定一个点击事件

2.在响应该点击事件的函数中使用$emit来触发一个自定义事件，并传递一个参数

3.在父组件中的子标签中监听该自定义事件并添加一个响应该事件的处理方法

4.保存修改的文件，在浏览器中点击按钮

子组件向父组件传值成功
总结一下：

  • 子组件中需要以某种方式例如点击事件的方法来触发一个自定义事件
  • 将需要传的值作为$emit的第二个参数，该值将作为实参传给响应自定义事件的方法
  • 在父组件中注册子组件并在子组件标签上绑定对自定义事件的监听
  • 在通信中，无论是子组件向父组件传值还是父组件向子组件传值，他们都有一个共同点就是有中间介质，子向父的介质是自定义事件，父向子的介质是props中的属性。抓准这两点对于父子通信就好理解了

Vue.js父子组件如何传值 通俗易懂的更多相关文章

  1. 【Vue课堂】Vue.js 父子组件之间通信的十种方式

    这篇文章介绍了Vue.js 父子组件之间通信的十种方式,不管是初学者还是已经在用 Vue 的开发者都会有所收获.无可否认,现在无论大厂还是小厂都已经用上了 Vue.js 框架,简单易上手不说,教程详尽 ...

  2. vue中非父子组件的传值bus的使用

    非父子之间的组件传值,可以使用vuex.简单的状态管理,也可以用vue bus vue bus可以实现不同组件间.不同页面间的通信,比如我在A页面出发点击事件,要B页面发生变化,使用方法如下: 全局定 ...

  3. Vue.js 父子组件之间通信的方式

    Vue 父子组件之间的同学有一下几种方式: 1. props 2. $emit -- 组件封装用的比较多 3. .sync -- 语法糖 4. $attrs 和 $listeners -- 组件封装用 ...

  4. 关于vue.js父子组件数据传递

    vue.js中使用props down,events up的原则进行父子组件间的通信,先来记录下props down,看个例子: <div id="app2"> < ...

  5. Vue.js 父子组件相互传递数据

    父传子 : 子组件接收变量名=父组件传递的数据 如::f-cmsg="fmsg"  注意驼峰问题 子传父:@子组件关联的方法名 = 父组件接受的方法名 如:@func=" ...

  6. vue.js父子组件通信动态绑定

    <!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8&quo ...

  7. vue.js 父子组件间 props 数据同步处理

    常见的场景: 在一个vue组件A中,使用另外一个组件B.A将自己的数据通过B组件的Props属性(propX)传递到B组件实例内部,B组件内部会修改该Props属性(propX)的值,此时在A组件内部 ...

  8. 关于Vue中父子组件相互传值

    Header为子组件,Home为父组件,通过子组件调用父组件 运行结果如下 下面是父组件调用子组件的案例 通过button按钮的click事件 图一是父组件Home中的run方法,图二是msg和fun ...

  9. vue.js单文件组件中非父子组件的传值

    最近在研究vue.js,总体来说还算可以,但是在web开发群里有一些人问在单文件组件开发模式中非父子组件如何传值的问题,今天在这里讲讲,希望对大家有所帮助! 在官网api中的这段讲解很少,也很模糊:官 ...

随机推荐

  1. 十九，基于helm搭建EFK日志收集系统

    目录 EFK日志系统 一,EFK日志系统简介: 二,EFK系统部署 1,EFK系统部署方式 2,基于Helm方式部署EFK EFK日志系统 一,EFK日志系统简介: 关于系统日志收集处理方案,其实有很 ...

  2. 消息中间之ActiveMQ

    一.JMS (JAVA Message Service) 1. JMS基本概念 JMS(JAVA Message Service,java消息服务)是java的消息服务,JMS的客户端之间可以通过JM ...

  3. idou老师教你学istio2：监控能力介绍

    我们知道每个pod内都会有一个Envoy容器,其具备对流入和流出pod的流量进行管理,认证,控制的能力.Mixer则主要负责访问控制和遥测信息收集. 如拓扑图所示,当某个服务被请求时,首先会请求ist ...

  4. 【小知识】证明 $1$ 到 $n$ 的立方和公式

    scb 发明了小学奥数(确信) Formula \(\sum\limits_{i=1}^n i^3 = (\sum\limits_{i=1}^n i)^2\) Provement 构造一个矩阵 \(a ...

  5. 牛客第十场 F.Popping Balloons

    第一维直接遍历 第二维用线段树维护每个最左端可以得到的贡献 在线段树上每次删除一个点会影响到 X   X-R   X-2*R  3个值 最多操作1e5次 复杂度 6*n*logn(删了还要加回来 #i ...

  6. Mac安装chromedriver和geckodriver

    DY@MacBook-Pro bin$brew install chromedriver Error: No available formula with the name "chromed ...

  7. python批量下载邮件附件

    背景 由于同学每周要通过邮箱收数学建模作业,100多人给她发附件,她要一个个地点着下载. 太麻烦了,所以想用程序实现下载附件的功能. 在网上查资料后,最终实现了稍为简单的下载附件功能,代码有些细节还不 ...

  8. Go语言关于Type Assertions的疑问

    我在"The Go Programming Language Specification"中读到了关于x.(T)这样的语法可以对变量是否符合某一type或interface进行判断 ...

  9. 在Myeclipse中没有部署jeesite项目，但是每次运行其他项目时，还是会加载jeesite项目

    解决办法: 一.在以下路径中找到jeesite文件,并删除 1.Tomcat 7.0\conf\Catalina\localhost 2.Tomcat 7.0\webapps 3.Tomcat 7.0 ...

  10. [转载]ac mysql 无法远程连接

    Mac mysql 无法远程连接 2018年07月23日 10:56:02 feixiang2039 阅读数 2866   版权声明:本文为博主原创文章,遵循CC 4.0 by-sa版权协议,转载请附 ...