vue 中 父组件向子组件传值 props。。vue-组件爷爷孙孙通信之provide/inject

一 . vue 中 父组件向子组件传值 props

先定义一个子组件，在组件中注册props

子组件接收来自父组件 ‘message’ 的数据
<template>
  <div>
    <div>{{message}}(子组件)</div>
  </div>
</template>
<script>
export default {
  props: {
    message: String //定义传值的类型<br>  }
}
</script>

<style>

</style> 

在父组件中，引入子组件，并传入子组件内需要的值

<template>
  <div>
  
    <div>父组件</div>

    <child :message="parentMsg"></child>  
 
  </div>
  
</template>
<script>
import child from './child' //引入child组件
export default {
  data() {
      return {
        parentMsg: '我是来自父组件的数据' //在data中定义需要传入的值
      }
    },
    components: {
      child
    }
}

</script>

<style>

</style> 

这种方式只能由父向子传递，子组件不能更新父组件内的data

二. vue-组件通信之provide/inject

vue-组件通信之provide/inject
一般父传子用的都是props
但是如果我们想要实现的是爷爷传给孙子，再去用props就比较麻烦了，中间还会经过爸爸。
所以我们可以使用provide/inject，孙子就可以直接用爷爷的东西啦，provide不关心去处，inject不关心来处。
写法也非常的简单，但是一定要注意存在爷孙关系。

爷爷的代码

 provide(){
    return {
      obj:this.obj      //传入一个响应式对象
      reload: this.reload,  // 传入一个方法
    }
  },
  data(){
    return {
      obj:{
        name:"张三"
      },
    }
  },
  onLoad(){
	  this.change()
  },
  methods:{
    change(){
      this.obj.name = "李四"
    },
    reload () {
      this.$nextTick(function () {
      	console.log('我是reload 方法');
      })
    },
  }

孙子的代码

//使用一  变量
{{obj.name}}

<script>
export default {
 data () {
 	return {}
 }
 computed: {},
 methods: {
 	//使用二   方法
 	this.reload();
 },
// 接收响应式对象 一变量
inject:["obj"]    
// 接收响应式对象 二方法
inject: ['reload']
}
</script>