乐趣区

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

jiezi

父组件数据传给子组件

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

总结未完, 待续 ……

退出移动版