父子组件传值原理图

一般页面的视图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. C 动态内存申请

    例子: int *p=0; int number=0; scanf("%d",&number); p = (int*)malloc(number*sizeof(int));

  2. storm 的分组策略深入理解（-）

    目录 storm的分组策略 根据实例来分析分组策略 common配置: Shuffle grouping shuffle grouping的实例代码 ShuffleGrouping 样例分析 Fiel ...

  3. FreeIPA ACI (Access Control Instructions) 访问控制说明

    目录 FreeIPA ACI (Access Control Instructions) 访问控制说明 一.ACI 位置 二.ACI 结构 三.ACI 局限性 四.复制拓扑中的ACI 五.操作ACI ...

  4. MySQL分组查询，查询出某一个字段的最新记录

    直接上案例...... 案例: 同一个表中,只想需要A.B.C的最新记录 第一种方案: 应该还很多方法......(暂时先这样.....) 

  5. C# IP地址和DNS 网络(三)

    Uri i = new Uri("http://www.baidu.com"); //可获取属性 UriBuilder u = new UriBuilder("http: ...

  6. Codeforces Round #588 (Div. 2) D. Marcin and Training Camp(思维)

    链接: https://codeforces.com/contest/1230/problem/D 题意: Marcin is a coach in his university. There are ...

  7. [Debug] Debugger Statements

    For example you have the following code; function reverse(str) { let reversed = ""; for (l ...

  8. [AngularJS] Decorator pattern for code reuse

    Imaging you have a large application, inside this large application you have many small individual a ...

  9. python中模块、包、库的区别和使用

    模块:就是.py文件,里面定义了一些函数和变量,需要的时候就可以导入这些模块. 包:在模块之上的概念,为了方便管理而将文件进行打包.包目录下第一个文件便是 __init__.py,然后是一些模块文件和 ...

  10. element-ui做表单验证 v-for遍历表单 自动生成校验规则 pc移动双适配

    整体思路: 1:利用element-ui的栅格实现小分辨率和大分辨率的适配 2:模拟一组数据,从中筛选出 绑定各个表单值的对象   以及生成验证规则对象 3:在script标签内 .data()外,自 ...