provide和使用computed跨组件传值

provide和inject

provide用于跨组件的传值。在祖先组件的data中提供一个对象，该对象可被注入到子孙组件中，不论组件的层级有多深。但是必须要是嵌套关系，才能实现注入

provide和inject需要一起使用，provide进行传递inject进行注入，实现祖先组件向后代组件进行传值。

传值操作

data中创建一个对象数据，然后provide进行传递，inject进行接收

<template>
<hello-world></hello-world>
</template>
<script>
import HelloWorld from './components/HelloWorld.vue'
export default {
  name: 'App',
  data () {
    return {
      obj : {
        name : 'jack',
        age : 18
      }
    }
  },
  methods : {
    chenge() {
      console.log(1)
      this.obj.name =  'Welcome to Your Vue.js App111'
    }
  },
  components: {
    HelloWorld
  },
  provide () {
    return {
      obj: this.obj.name, // 这里的值，是基本值，和data中的数据没有关系

　　　 obj: this.obj // 需要传递一个对象，而且这个对象还要再data中进行了声明

      chenge: this.chenge // 如果是基本值，跟data的数据没有关系，修改的话是修改不了的
    }
  }
}
</script>
<style lang="less">
</style>

子组件进行数据的接收和修改

<template>
  <div>
    <h1>{{obj}}</h1>
    <div>
      <button @click="chenge">点击修改</button>
    </div>
  </div>
</template>

<script>
export default {
  name: 'HelloWorld',
  inject : ['obj','chenge'],
}
</script>

<style scoped lang="less">

</style>

注意点

provide属性不是响应式数据，provide里面的数据和data中的数据不是一个数据，provide里面的数据是对data中的数据进行解析获取的。

如果我们想让provide里面的数据是响应式数据，inject可以对其修改。我们首先需要再data中声明一个对象，然后给provide赋值一个对象，在methods中声明一个方法，修改data中的数据。最后给provide赋值一个修改数据的方法，进行传递。inject进行数据和方法的接收，就可以完成数据的修改。

为什么一个要赋值一个对象才可以被修改？因为如果赋值一个基本值，会被解析传递，解析传递和data数据都不是同一个数据。如果是对象数据，不会被解析传递，和data数据是同一个数据。

这样做起来比较麻烦，子组件的数据，需要在父组件中进行声明还必须要声明一个对象。使用Vue.observable（）进行响应式的实现。

Vue.observable（）响应式的实现

创建一个observable.js文件使用Vue.observable方法把一个普通数据处理成响应式数据

observable.js文件作为公共的存放数据的地方

import Vue from 'vue'
// 可以把一个普通数据处理成响应式数据
export const info = Vue.observable({
    name: '王路飞',
})
//进行方法的声明，修改普通数据
export const close = () => {
    info.name = '黑胡子'
}

App.vue页面直接进行页面的传值

<template>
<hello-world></hello-world>
</template>
<script>
import HelloWorld from './components/HelloWorld.vue'
import { info , close } from "@/oberver";
export default {
  name: 'App',
  components: {
    HelloWorld
  },
  provide () {
    return {
      info,
      close
    }
  }
}
</script>
<style lang="less">
</style>

子组件进行数据的接收

<template>
  <div>
    <h1>{{info.name}}</h1>
    <div>
      <button @click="close">点击修改</button>
    </div>
  </div>
</template>
<script>
export default {
  name: 'HelloWorld',
  inject : ['info','close'],
}
</script>
<style scoped lang="less"></style>

这样，就解决了，传递的数据必须是对象，而且必须要在父组件中进行数值的声明