1.出现背景

本来自己写页面的话是直接全部写在一个vue文件里，一个vue文件几千行代码基本都是小事，压根没用到组件传参，所以自己的组件传参也很烂。现在写都是把页面拆的很细的那种了，正好练练自己的组件间传参。
先上一份代码:

//主组件
<template>
  <div class='app-container'>
    <p>父组件</p>
    a {{ params.a }} -- b {{ params.b }} -- num {{ num }}
    <child :params.sync="params" :num.sync="num"></child>
  </div>
</template>
<script>
import child from './child.vue';
export default {
  data() {
    return {
      params: {
        a: 10, b: 20
      },
      num: 26
    }
  },
  components: { child },
  methods: {
    changeParams(data) {
      this.params = data
    }
  },
  provide() {
    return {
      changeParams: this.changeParams
    }
  }
}
</script>
//子组件
<template>
  <div class='app-container'>
    <p></p>
    <p>子组件</p>
    a {{ params.a }} -- b {{ params.b }} -- num {{ num }}
    <grandson :params.sync="params" :num.sync="num"></grandson>
  </div>
</template>
<script>
import grandson from './grandson.vue';
export default {
  props: {
    params: Object,
    num: Number
  },
  components: { grandson },
}
</script>
//孙组件
<template>
   <div class='app-container'>
      <p></p>
      <p>孙组件</p>
      a {{ params.a }} --num {{ num }} b <el-input v-model="params.b"></el-input>
      <el-button @click="change">change</el-button>
   </div>
</template>
<script>
export default {
   props: {
      params: Object,
      num: Number
   },
   methods: {
      change() {
         //错误的
         // this.params = {
         //    a:10,b:10
         // }
         //错误的
         //this.num = 10;
         //修改一个属性是可以的
         //this.params.b = 10
         //this.params.a = 1
         // this.$emit('update:params',{
         //    a:10,b:10
         // })
         // this.$root.eventHub.$emit('changeParams')

         // this.changeParams({ a: 10, b: 10 })

      }
   },
   inject: ['changeParams']
}
</script>

可以看到的是我们主要讲params和num传了下去
大概页面效果是这样吧

2.怎么在孙组件里改变传过来的值呢

2.1这样改是不行的

    //错误的
          this.params = {
             a:10,b:10
          }
         //错误的
         this.num = 10;

直接在change事件里这样改变是不可以的，直接报错

 this.$emit('update:params',{
            a:10,b:10
         })

这样写的话，子组件的值是可以改变的，但是依然会报错

2.2可行的方法

2.2.1 引用对象只改变单属性

可行的方法 发现只改引用对象的单属性是可以成功的!

 this.params.b = 10
         this.params.a = 1

但是属性多了的话可能就不太优雅了

2.2.2 provide和inject

最后可以用provide和inject来实现

//主组件
methods: {
    changeParams(data) {
      this.params = data
    }
  },
  provide() {
    return {
      changeParams: this.changeParams
    }
  }
  //孙组件
   methods: {
      change() {
         this.changeParams({ a: 10, b: 10 })

      }
   },
   inject: ['changeParams']