Vue 子传父，props变量值类型为对象，可以不用$emit方法

如题，通常情况下，父传子可以通过在子组件中声明props变量，经由父组件通过动态属性传入；子传父需要通过$emit方法，在特定情况下激发$emit，调用父组件自定义的函数并传参，来改变父组件data中的内容。

如果子传父不采用$emit方法，而是直接修改数值，会导致父子组件数据不一致，然后控制台报错，如下（这里的props定义了是number类型）

父：

<template>
  <div>
    <Test :index="index"></Test>
  </div>
</template>

<script>
import Test from './components/Test.vue'
export default {
  data(){
    return{
      index:5 
    }
  },
components:{
  Test
}
}
</script>

<style>

</style>

 子：

<template>
  <div>
    <button @click="index--">-</button>
    <input type="text" v-model="index">
  </div>
</template>

<script>
export default {
props:{
    index:Number
}
}
</script>

<style>

</style>

//通过点击减号按钮，来使得输入框中的数字-1

结果：点击后虽页面上实现了-1结果，但控制台提示报错

 

如果把传入数据修改成对象，在对象中定义index，结果便不会报错，并且会同步父组件数据的修改

//父组件
<template>
  <div>
    <Test :index="index"></Test>
  </div>
</template>

<script>
import Test from './components/Test.vue'
export default {
  data(){
    return{
      index:{
        id:5
      }
    }
  },
components:{
  Test
}
}
</script>

<style>

</style>




//子组件
<template>
  <div>
    <button @click="index.id--">-</button>
    <input type="text" v-model="index.id">
  </div>
</template>

<script>
export default {
props:{
    index:Object
}
}
</script>

<style>

</style>

结果：

点击后确实能使父组件id值-1并不报错

 原理：

== 对象的引用，引用的是地址，因此父子组件中的index是同一个对象，子组件修改数据便不存在父子组件数据冲突的隐患；反之，如果是普通的字符串，数值型变量，变量的引用/传递等同于开辟了一个新的空间，因此改变内容后会出现两者数据的冲突 ==