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

vue组件传值 prop传递对象相关推荐

vue组件传值方式有哪些
Vue 作为一个轻量级的前端框架,核心两大特性就是响应式编程和组件化. 本文针对组件之间传值做详细讲解. Vue就是由一个一个的组件构成的,组件化是它的精髓,也是最强大的功能之一.而组件实例的作用域是 ...
vue组件之间数据传递和通信方式总结
vue组件之间数据传递和通信方式总结方式主要包括: 父组件=>子组件 | 单向数据流,props 子组件=>父组件 | 观察者模式,即vue的自定义事件 $emit 和 $on 非父子组 ...
41. Vue组件传值-父组件向子组件传值
前言前面写了组件的创建.切换等等篇章,主要讲述了组件自身如何在父组件app中如何渲染使用.这里存在一个问题,就是父组件的数据如何传递到子组件中. 这是一个很常见的情况,如果是jQuery那么都是直接 ...
Vue组件传值的三种方法
Vue组件传值的三种方式 1.父传子父传子使用props: 1.父组件:即在使用的子组件标签上,自定义一个绑定数据,这里我使用的是"mymsg",将父组件的msg绑定在其上. 2 ...
vue组件传值的十种方式
vue组件传值的十种方式一.props 父传子子组件 // 第一种数组方式 props: [xxx, xxx, xxx] // 第二种对象方式 props: { xxx: Number, xxx: ...
【vue】vue组件传值的三种方式
前言 vue的组件传值分为三种方式:父传子.子传父.非父子组件传值引用官网的一句话:父子组件的关系可以总结为 prop 向下传递,事件向上传递父组件通过 prop 给子组件下发数据,子组件通过事件 ...
this指向-作用域、作用域链-预解析变量提升-Vue组件传值父子子父非父子-Vue数据双向绑定原理
目录 this指向作用域.作用域链预解析变量提升 Vue组件传值父子子父非父子 Vue数据双向绑定原理 1.this指向函数的this指向看调用.不看声明 (1)普通函数调用 ①函数名 ...
Vue组件传值及插槽
目录组件传值父组件向子组件传值子组件向父组件传值兄弟组件间传值组件插槽父组件向子组件传递内容具名插槽作用域插槽组件传值父组件向子组件传值组件内部通过props接收传递过来的值,父 ...
vue组件传值的11种方式
不写这篇文章,我自己都不知道我知道的vue组件传值的方式竟然有11种之多,其实静下来想想,常用的也有五六种,先上一张总结图: 1.父组件传给子组件在子组件里定义一个props,即props:['ms ...

vue组件传值 prop传递对象

vue组件传值 prop传递对象

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

总结一下

vue组件传值 prop传递对象相关推荐

最新文章

热门文章