父子组件传值原理图

一般页面的视图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. VTORRAAYY ws+tls+nginx config

    # nginx conf partal location /haha { proxy_redirect off; # the prot should same with config v2*** pr ...

  2. kubernetes之pod调度

    调度规则 deployment全自动调度: 运行在哪个节点上完全由master的scheduler经过一系列的算法计算得出, 用户无法进行干预 nodeselector定向调度: 指定pod调度到一些 ...

  3. rdb和aof二种持久化方式对比(Redis)

    我们已经知道对于一个企业级的redis架构来说,持久化是不可减少的 企业级redis集群架构:海量数据.高并发.高可用 持久化主要是做灾难恢复,数据恢复,也可以归类到高可用的一个环节里面去 比如你re ...

  4. BCB 如何拦截TAB键消息

    最近项目中一个需求,按下Tab键,按照指定的顺序进行跳转. 在实现的过程中发现,Tab按下的时候,会让当前控件失去焦点.并跳转到其他可焦点控件 例如 TEdit,TButton 等. 究其原理,是因为 ...

  5. 2.PAT 1001 害死人不偿命的(3 n + 1 )猜想

    题目: 卡拉兹(Callatz)猜想: 对任何一个正整数 n,如果它是偶数,那么把它砍掉一半:如果它是奇数,那么把 ( 砍掉一半.这样一直反复砍下去,最后一定在某一步得到 n=1.卡拉兹在 1950 ...

  6. solr 中文分词相关（转载）

    smartcn和ik的对比,来自http://www.cnblogs.com/hadoopdev/p/3465556.html 一.引言: 年的时候,就曾经有项目涉及到相关的应用(Lunce构建全文搜 ...

  7. vue-重要方法使用

    标签属性router-link-exact-active: 当页面正在方位是触发router-link-exact-active 标签router-link to= 使用a标签页面就会跳转,就不是单页 ...

  8. 题解 [CF961G] Partitions

    题面 解析 首先我们观察这个定义, 可以发现每个元素在统计答案时是平等的, 也就是单个元素的权值对答案没有特别的影响. 设元素权值为\(w[i]\), 那么我们就可以知道答案是\(\sum_{i=1} ...

  9. springboot 集成swagger2.x 后静态资源报404

    package com.bgs360.configuration; import org.springframework.context.EnvironmentAware; import org.sp ...

  10. 报错Too many connections

    com.mysql.jdbc.exceptions.jdbc4.MySQLNonTransientConnectionException: Data source rejected establish ...