|
目录
父组件传给子组件数据?
父组件如何操作子组件的元素?
祖先和后代之间传值
父组件传给子组件数据?
? ?HTML结构 :
<!--操作div的就是父组件-->
<div id="example">
<parent message="message"></parent> <!--子级组件-->
</div>
?
实现父传子
?1. props 自定义属性???
? ? ? ? 父级组件
? ? ? ? ? ? ? ? 要设置传进去的属性 ( message )
<parent message="message"></parent>
? ? ? ? 子组件
? ? ? ? ? ? ? ? 需要在子组件内用props自定义属性接收
// 子组件
export default {
name:'Children',
props:['message']
}
使用的方法 {{message}} , v-bind
????????
2. $attrs (可以代替props父传子)
? ? ? ? 子组件可以直接使用? ( $attrs.父级传递过来的属性值)
????????
<!--在子组件内-->
<div id="Children">
<p>{{$attrs.message}}</p>
</div>
props和$attrs的区别是什么 ?
? ? ? ? props是父类向子类传递并且需要子类主动接收的属性
? ? ? ? $attrs 默认是父类传递到字类根元素的属性,字类不用主动接收会直接放在子类根元素上
父组件如何操作子组件的元素?
?? ?HTML结构 :
<!--操作div的就是父组件-->
<div id="example">
<parent ref="parent"></parent> <!--子级组件-->
</div>
1. ref
$refs 可以直接获取到子类的元素和值
this.$refs.parent.'要操作的子级元素'
?2. $children
this.$children[0].'要操作的子级元素'
区别
? ? ? ? $refs可以直接获取到添加了ref属性的元素
? ? ? ? $children? 获取到的是所有子元素,但是(子元素是无序的,不会保证顺序)
?
祖先和后代之间传值
? ? ? ? 由于嵌套层数过多,传递props不切实际,vue提供了? provide/inject? API? 来完成该任务
- provide/inject : 能够实现祖先给后代传值
????????provide 祖先
// 祖先提供
provide(){
return {属性名:'属性值'}
}
????????inject 后代
// 后代注入
inject : ['属性名']
?
这里就和大家分享完毕啦 ! ! !
|