vue--三种组件中之间的传值
参考网址:https://www.jianshu.com/p/46573a741c29
一、父子组件之间的传值----props/$emit
组件之间的传值,我们比较常用到的是props/$emit
1、父组件向子组件传值--props
这里我们在父组件中定义的extensionObj是一个对象
<Extension :extensionObj="extensionObj"/>
data(){
return{
extensionObj: {},
}
}
在子组件中接收值
props:{
extensionObj: {
type: Object,
default: {}
},
},
2、子组件向父组件传值
子组件:
<col @click="tableClickBtn(item)"></col>
写个方法触发
tableBtnClick(item){
this.$emit('select',item);
}
父组件:
<StaffDialog ref="staffDialogRef" @select="staffDialogSelect"/>
写个方法接收
staffDialogSelect(item) {
this.searchObj = item;
}
二、父组件向下(深层)子组件传值----provide/inject
这里引用vue官网文档里的话
类型:
provide:Object | () => Object
inject:Array<string> | { [key: string]: string | Symbol | Object }
详细:
provide 和 inject 主要在开发高阶插件/组件库时使用。并不推荐用于普通应用程序代码中。
provide 选项应该是一个对象或返回一个对象的函数
inject 选项应该是:
一个字符串数组,或
一个对象,对象的 key 是本地的绑定名,value 是:
在可用的注入内容中搜索用的 key (字符串或 Symbol),或
一个对象,该对象的:
from property 是在可用的注入内容中搜索用的 key (字符串或 Symbol)
default property 是降级情况下使用的 value
// 父级组件提供 'foo'
var Provider = {
provide: {
foo: 'bar'
},
// ...
}
// 子组件注入 'foo'
var Child = {
inject: ['foo'],
created () {
console.log(this.foo) // => "bar"
}
// ...
}
父组件中getCustInfo为接口返回的数据
provide(){
return {
getCustInfo: this.getCustInfo
}
},
子组件接收
inject: ['getCustInfo'],
这里的getCustInfo也可以个是一个方法,返回一个函数
methods:{
getCustInfo(){
return this.custInfo; //custInfo是接口返回的数据
}
}
那么,子组件的接收应该这样
custInfo(){
return this.getCustInfo();
},
三、访问父、子组件----ref、child
1、ref--在父组件中访问子组件
引用官网api:
尽管存在 prop 和事件,有的时候你仍可能需要在 JavaScript 里直接访问一个子组件。为了达到这个目的,你可以通过 ref 这个 attribute 为子组件赋予一个 ID 引用。例如:
<base-input ref="usernameInput"></base-input>
现在在你已经定义了这个 ref 的组件里,你可以使用:
this.$refs.usernameInput
注意:refs。
2、父、子组件之间的访问
引用官网api:
指定已创建的实例之父实例,在两者之间建立父子关系。子实例可以用 this.children 数组中。
节制地使用 children - 它们的主要目的是作为访问组件的应急方法。更推荐用 props 和 events 实现父子组件通信
这里组件之间的访问,目前实战中用到的较少。按官网的话,就是不太建议使用。
作者:为光pig
链接:https://www.jianshu.com/p/46573a741c29
来源:简书
著作权归作者所有。商业转载请联系作者获得授权,非商业转载请注明出处。
vue--三种组件中之间的传值的更多相关文章
- java Data、String、Long三种日期类型之间的相互转换
java Data.String.Long三种日期类型之间的相互转换 // date类型转换为String类型 // formatType格式为yyyy-MM-dd HH:mm:ss// ...
- 基于vue项目的组件中导入mui框架初始化滑动等效果时需移除严格模式的问题
基于vue项目的组件中导入mui框架初始化滑动等效果时,控制台报错:Uncaught TypeError: 'caller', 'callee', and 'arguments' properties ...
- 简述在Vue脚手架中,组件以及父子组件(非父子组件)之间的传值
1.组件的定义 组成: template:包裹HTML模板片段(反映了数据与最终呈现给用户视图之间的映射关系) 只支持单个template标签: 支持lang配置多种模板语法: script:配置Vu ...
- vue常见的三种组件通讯—props,$refs,this.$emit
一.父组件--->子组件 props 1.特点:props是用于父组件向子组件传递数据信息(props是单向绑定的,即只能父组件向子组件传递,不能反向 2.用法:父组件中使用子组件时,绑定要传递 ...
- Vue组件中的父子传值
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- java设计模式---三种工厂模式之间的区别
简单工厂,工厂方法,抽象工厂都属于设计模式中的创建型模式.其主要功能都是帮助我们把对象的实例化部分抽取了出来,优化了系统的架构,并且增强了系统的扩展性. 本文是本人对这三种模式学习后的一个小结以及对他 ...
- vue(三)-父子组件通信
原因 : Vue 的组件作用域都是孤立的,不允许在子组件的模板内直接引用父组件的数据.必须使用特定的方法才能实现组件之间的数据传递. props 父组件给子组件传递数据 props:作用是父组件给 ...
- ios学习网络------4 UIWebView以三种方式中的本地数据
UIWebView这是IOS内置的浏览器.能够浏览网页,打开文档 html/htm pdf docx txt等待格文档类型. safari浏览器是通过UIWebView制作. server将 ...
- 空数组在以下三种遍历中均不可更改:forEach、map和for...in
首先,我们要知道对于forEach.map和for...in三种遍历,在不是空数组的情况下,要想实现更改原数组的方法,代码如下: var list = [1,2,3,4]; var list1 = [ ...
随机推荐
- Luogu P4553 80人环游世界
link 题目大意 自东向西有 \(n\) 个国家.有 \(m\) 个人,他们可以选择 \(n\) 个国家中任意一个开始,任意一个结束,但路线必须自东向西,且第 \(i\) 个国家必须恰好经过 \(v ...
- python 模拟点击微信
from PyQt5 import QtCore,QtWidgets import win32gui, win32api, win32con # 调用win32api的模拟点击功能实现ctrl+v粘贴 ...
- C语言:随机数
在实际编程中,我们经常需要生成随机数,例如,贪吃蛇游戏中在随机的位置出现食物,扑克牌游戏中随机发牌.在C语言中,我们一般使用 <stdlib.h> 头文件中的 rand() 函数来生成随机 ...
- 00JAVA语法基础_四则运算 01
自动生成30道四则运算的数学题,当前只是简单符合出题,答题和判断的代码,还没做要求,所以现在只是能随机生成三十道100以内的加减法和九九乘法表的乘除法 package Sizeyunsuan; /** ...
- Linux从入门到进阶全集——【第十四集:Shell编程-export命令】
参考: https://www.cnblogs.com/guojun-junguo/p/9855356.html 功能说明:设置或显示环境变量. 语 法:export [-fnp][变量名称]=[变量 ...
- jmeter测试流程整理
背景 整理jmeter脚本编写流程,注意事项,常用组件,常见问题. 参看链接:https://www.cnblogs.com/pwj2lgx/p/10282422.html 参看:processOn思 ...
- 第一篇 -- Sprint Tool Suite配置和Hello World编写
首先需要安装 1. Sprint Tool Suite(本次所用版本:spring-tool-suite-3.8.3.RELEASE-e4.6.2-win32-x86_64) 2. Tomcat(本次 ...
- Python - if 条件控制
注意 本篇图片素材都来自慕课网,因为素材过于优秀,直接拿过来了,加水印只是为了防止整篇文章被搬 前言 程序并非是一成不变的向下执行,有的时候也要根据条件的不同选择不一样的代码,这个时候便用到了分支结构 ...
- C# JSON学习之序列化与反序列化
在我的个人计划中,学习制作c#下的曲线平台属于下半年的重点.关于前后端的数据传递-json数据的学习很有必要,通过一个例子来加深自己的理解. 新建一个console控制台程序,通过导入NewstonS ...
- jquery 中 live() 对于js的需求版本导致不可用解决办法
$('body').on('click','.edit', function() { var id = $(this).parent().attr('id'); ...