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, 确定接收的数据对象只有一层。如果有多层嵌套,那么底层的数据仍然会被改变。

  • 4
    点赞
  • 7
    收藏
    觉得还不错? 一键收藏
  • 1
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值