父组件数据传给子组件
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的区别是什么 ?
1. props是父类向子类传递并且须要子类被动接管的属性
2. $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 : ['属性名'] 总结未完, 待续......