vue-Prop组件传值

vue组件传值经常用到，但是这里面有一些坑需要注意。比如：父组件向子组件传递的参数是一个对象，对操作prop修改则会影响父组件的值。这里记录一下。

子组件接收基本数据类型

父组件

<template>
  <div>
    我是父组件,姓{{firstName}}
    <son :firstName="firstName"></son> //绑定要传递给子组件的参数
  </div>
</template>

<script>
import Son from '../components/son'
export default {
  components: {
    Son
    }, //引入子组件 
  data () {
    return {
      firstName: '张'
      }
   }
} //原信息
</script>

子组件

<template>
  <input v-model="firstName" placeholder="我是子组件">//插值
</template>

<script>
export default {
  props: { //接收父组件传来的数据，并指定类型
    firstName: {
      type: String,
      required: true
    }
  },
} 
</script>

注意：子组件用了v-model 所以在输入框里修改内容，会直接改变firstName的值。虽然可以修改成功，但是控制台也会有报错。

[Vue warn]: Avoid mutating a prop directly since the value will be overwritten whenever the parent component re-renders. Instead, use a data or computed property based on the prop's value. Prop being mutated: "firstName"

并且官网有明确的说明，不支持这么做。需要把对子组件接收的值转换成本地数据，然后再对此进行操作。

参数本地化

<template>
  <input v-model="fName" placeholder="我是子组件">//插值
</template>

<script>
export default {
  props: { //接收父组件传来的数据，并指定类型
    firstName: {
      type: String,
      required: true
    }
  },
   data: function () {
    	return {
     		fName: ''
    	}
   },
   // 将 prop 数据转换为本地数据
	computed: {
	  initData: function () {
	    return this.fName = this.firstName
	  }
}
} 
</script>

这样我们对本地数据进行修改，控制台也不会报错。由于js基本数据类型都是值传递，所以无论如何修改，都不会污染父组件的数据。

子组件接收对象或者数组数据

<template>
  <input v-model="newName.firstName" placeholder="我是子组件">//插值
</template>

<script>
export default {
  props: { 
  //接收父组件传来的数据
    name: {}
  },
  data: function () {
    	return {
     		newName: {
     			firstName:'',
    			lastName:''
     		}
    	}
   },
	computed: {
	  initData: function () {
	  // 将对象本地化
	    return this.newName = JSON.parse(JSON.stringify(this.name))
	  }
}
} 
</script>

总结

由于js对象和数组赋值运算，赋值的其实是内存地址，所以两个变量任意一个改变，另外一个也会跟着改变。这里利用 JSON.stringify 和 JSON.parse() 来进行隔离,相当于深度copy。当然也可以用 Object.assign() 进行拷贝。但是需要注意：Object.assign() 只是最浅的copy， 确定接收的数据对象只有一层。如果有多层嵌套，那么底层的数据仍然会被改变。