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
来源:简书
著作权归作者所有。商业转载请联系作者获得授权,非商业转载请注明出处。
最新文章
- CSS学习笔记
- Jenkins 2.0 要来了
- C++ 虚函数,纯虚函数的一些问题
- hive中分析函数window子句
- iOS 自定义的对象类型的解档和归档
- angular+ckeditor最后上传的最后一张图片不会被添加(bug)
- Windows Store App 文件选取器
- 为什么要用rem
- Android签名详解(debug和release)
- cluster analysis in data mining
- 20150626_Andriod_02_ListView2_列表与详细信息
- 关于HTTP GET请求的url中文参数编码
- 【英语】Bingo口语笔记(43) - u长短音
- ztree使用心得
- SQLserver的存储过程
- C#文件处理
- 设计模式 -- 迭代器模式(Iterator)
- MySQL Server 5.0安装教程
- introduce explaining variable 引入解释变量
- List<;T>;.ForEach 调用异步方法的意外
热门文章
- lua环境搭建
- 前端之html基础演示
- Python+pytest知识点回顾
- 【每日算法】存在重复元素 III
- jvm源码解读--08 创建oop对象,将static静态变量放置在oop的96 offset处
- 《手把手教你》系列技巧篇(十三)-java+ selenium自动化测试-元素定位大法之By partial link text(详细教程)
- MegEngine TensorCore 卷积算子实现原理
- 数据库技术中的触发器(Trigger)——和ContentObserver功能类似
- 科普—为什么要用ECDSA加签及其数学上的验签证明
- CentOS 永久修改系统时间