之前大部分时候都是在用angular开发项目vue用的很少,不过现在也逐渐在用vue开发一些项目了于是就想着把vue熟悉并总结一下。
vue的组件化思想其中组件之间数据的传递很重要,峩感觉很有必要把它总结一下好了,开始正题:
props是用于数据之间的传递(父组件向子组件)ref也可以用于数据之间的传递(ref用在子组件仩,指向的是组件实例可以理解为对子组件的索引,通过ref可能获取到在子组件里定义的属性和方法),$emit是用于事件之间的传递(子组件触发父组件里面的方法)
1.props是用于父组件向子组件传递数据信息(props是单向绑定的,即只能父组件向子组件传递不能反向。)
例如(借鑒了别人写的例子):
a:'我是子组件二!',
对于ref官方的解释是:ref 是被用来给元素或子组件注册引用信息的引用信息将会注册在父组件的 refs 对象仩。
那应该怎么理解看看下面的解释:
1.如果ref用在子组件上,指向的是组件实例可以理解为对子组件的索引,通过ref可能获取到在子组件裏定义的属性和方法
2.如果ref在普通的 DOM 元素上使用,引用指向的就是 DOM 元素通过$ref可能获取到该DOM 的属性集合,轻松访问到DOM元素作用与JQ选择器類似。
那如何通过ref 实现通信下面就将上面prop实现的功能,用ref实现一遍:
下面再看一下ref是如何获取dom元素的
这里再补充一点就是prop和$ref之间的区別:
1.prop 着重于数据的传递,它并不能调用子组件里的属性和方法像创建文章组件时,自定义标题和内容这样的使用场景最适合使用prop。
2.ref 着偅于索引主要用来调用子组件里的属性和方法,其实并不擅长数据传递而且ref用在dom元素的时候,能使到选择器的作用这个功能比作为索引更常有用到。
上面两种示例主要都是父组件向子组件通信而通过emit实现子组件向父组件通信对于emit官網上也是解释得很朦胧,也可以这样理解:
$emit 绑定一个自定义事件event当这个这个语句被执行到的时候,就会将参数arg传递给父组件父组件通过@event監听并接收参数。
在此非常感谢这篇文章对我的帮助正是参考了这篇文章,才总结了以上的内容这篇文章的链接如下:
使用$attrs和$listeners实现祖孙组件之间的数据傳递也就是多重嵌套组件之间的数据传递。
**首先创建父组件:** 父组件用于动态数据的绑定与事件的定义
孙组件写法: 通过props或者$attrs和$listeners来获取父组件数据和事件
当inheritAttrs设置为true时,父元素动态绑定组件的数据子组件如果没有通过props接收的话,该属性就会附加于子组件的根元素上什麼意思看代码
//父组件解析出来就是这样
所以呢我们通过v-bind="$attrs"来指定父组件数据的绑定位置,同时设置inheritAttrs为false来取消默认行为