Vue如何实现组件互通数据

目录

父组件传给子组件数据 

父组件如何操作子组件的元素?

祖先和后代之间传值

---

父组件传给子组件数据 

---

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

---

 

这里就和大家分享完毕啦 ! ! !