Vue - 怎么实现组件之间数据互传 vue.js

父组件数据传给子组件
HTML结构 :

实现父传子
1. 通过 props 自定义属性

父级组件 : 要设置传进去的属性 ( message )

子组件 : 需要在子组件内用props自定义属性接收

// 子组件 export default { name:'Children',props:['message'] } 使用的方法{{message}} ,v-bind

2. $attrs (可以代替props父传子) 子组件可以直接使用 ( $attrs.父级传递过来的属性值)

{{$attrs.message}}

props和$attrs的区别是什么 ?
1. props是父类向子类传递并且需要子类主动接收的属性
2. $attrs 默认是父类传递到字类根元素的属性,字类不用主动接收会直接放在子类根元素上
父组件如何操作子组件的元素?

**HTML结构 :**

1. ref $refs 可以直接获取到子类的元素和值

this.$refs.parent.'要操作的子级元素'

2. $children

this.$children[0].'要操作的子级元素'

区别
$refs可以直接获取到添加了ref属性的元素
$children 获取到的是所有子元素,但是(子元素是无序的,不会保证顺序)
祖先和后代之间传值
由于嵌套层数过多,传递props不切实际,vue提供了 provide/inject API 来完成该任务
provide/inject : 能够实现祖先给后代传值
provide 祖先