vue组件传值 prop传递对象

vue组件传值 prop传递对象

大家经常会使用组件传值，今天我用到的时候突然遇到了一些坑，想着今天来记录一下，大家做一个参考，此篇仅说一下prop传递对象。

子组件接收基本的数据类型

子组件

<template>
  <view v-model="list"></view >
</template>

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

父组件

<template>
  <div>
    父组件{{firstName}}
    <list :recive="recive"></list> //绑定要传递给子组件的参数
  </div>
</template>

<script>
import listfrom '../components/list' // 组件路径
export default {
  components: {
    list
    }, //引入子组件 
  data () {
    return {
        recive:{'参数'}
      }
   }
} 
</script>

写到这里的时候要注意一下，虽然子组件v-model绑定了那个list值，但是大家可以发现，参数并没有传递过来，并且还会有一个报错。

The data property "value" is already declared as a prop. Use prop default value instead

这里就是需要吧子组件接收的的参数变为本地数据。

<template>
  <view v-model="list"></view >//插值
</template>

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

这里需要注意一下的最后一点是如果子组件接收的是对象或者数组数据，或者说对象里面会有数组数据，因为在我操作过程中打印上面那个本地数据打印出来的是一个数组形式的object，后来我发现了问题，需要对本地数据还要进行一个转化。

<template>
  <view v-model="list"></view >//插值
</template>

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

总结一下

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