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

Posted 2021-09-03 HZM_无止境

---

父组件数据传给子组件

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 : [\'属性名\']
 

---

总结未完, 待续......