Vue-组件传值

前言

---

很多时候我们都会遇到组件之间数据传递问题.所以我们必须要了解组件之间的数据传递的方式.

目标

---

• props
• provide && inject

props

---

两个组件之间存在父子关系,子组件需要访问父组件的某个数据. 由于组件之间都是独立的存在,我们无法直接在子组件里面使用父组件的数据.所以我们来认识一下props

• 父子组件数据传递原理

父组件传递数据给子组件. 子组件通过props获取父组件传递过来的数据.

父组件传递数据方式:

<child value='hello'>我是子组件</child>

传递一个value 给子组件,它的值为'hello'.

子组件接受数据的方式:

1. 数组方式

export default {
  props:['value']
}

2. 对象方式

export default {
  props:{
    value:{
      type: String,
      required: true
    }
  }
}

type: 类型.
required: 是否是必填项.

对象方式可以做到对父组件数据传递的限制.

以上面的对象方式为例: value 你只能传字符串, 并且必须给我传过来,不然我就报错.

• 应用场景

子组件要获取父组件传递过来的数据.

provide && inject

---

我们了解了父子组件之间的数据传递,现在又有一个很大的问题.就是组件之间多层嵌套如何进行数据传递问题.

举个栗子: A组件是B组件的父亲,B组件是C组件的父亲. 它们之间发生了嵌套关系,这时候我想要在C组件里面获取A组件里面的数据.

最笨的办法就是: 通过props方式A传给B,B传给C. 虽然这种方式确实可以解决我们的问题.但是你会发现超级麻烦.如果组件嵌套越多就越难受.

我是一个不太喜欢麻烦的人,所以我们来认识一下provide与inject这对基佬.

• provide

翻译过来它是提供的意思.

如果在某个组件里面使用 provide,其实就是给它的后代提供某些数据。
所有它的后代都可以获取到它所提供的数据.

export default {
  provide() {
    return {
      obj: this
    };
  }
};

• inject
  如果一个组件使用了provide 传递数据,那要获取provide 提供的数据,我们就需要用到inject.

export default {
  inject: ["obj"]
};

• 应用场景

一个组件想要提供一些数据给它的后代访问.