网站建设定制开发Vue父组件传给子组件数据,子组件得不到数据解决方法

网站建设定制开发父组件向子组件传数据,网站建设定制开发子组件无法的得到对应数据,网站建设定制开发也就是子组件console.log(this.dataPicture)打印得不到数据

第一种方案

(1)数据为 数组 时候

当父组件是要传给子组件的数据为 数组 的时候 用数组判断大于0,加在挂载父组件上的子组件上面
v-if=“dataPictureList.length >0” 按钮如下

父组件

<homePicture :dataPicture='dataPictureList' v-if="dataPictureList.length >0">
1

data () {  return {    dataPictureList: [],  }}
1
2
3
4
5

子组件

props: {  dataPicture: {    type: Array,    default: () => ({})  }},
1
2
3
4
5
6

(2)数据为 对象 时候

当父组件是要传给子组件的数据为 对象 的时候 用数组判断大于0,加在挂载父组件上的子组件上面
v-if=“Object.keys(dataPictureList).length >0”
注意 :

对象是 Object.keys(dataPictureList)这个大于0

数组用数组长度就行:dataPictureList.length 这个大于0

父组件

<homePicture :dataPicture='dataPictureList' v-if="Object.keys(dataPictureList).length >0">
1

data () {  return {    dataPictureList: {},  }}
1
2
3
4
5

子组件

props: {  dataPicture: {    type: Array,    default: () => ({})  }},
1
2
3
4
5
6

(3)数据为 数字 时候

下面这个是个分页器的

父组件

<pagination :total='total' v-if="total > 0"></pagination>
1

data () {  return {    total: 0  }}
1
2
3
4
5

子组件

props: {    total: {        type: Number,        default:0    }},
1
2
3
4
5
6

(4)数据为 字符串 时候

父组件

<pagination :total='total' v-if="total"></pagination>
1

data () {  return {    total: 'qwe'  }}
1
2
3
4
5

子组件

props: {    total: {        type: String,        default:''    }},
1
2
3
4
5
6

第二种方案

如果不加v-,也可以子组件监听父组件传过来的数据也可以得到

watch: {  dataPicture: {    handler (newVal, oldVal) {      console.log(newVal, '这样也可以得到数据~~~');      // this.list = newVal      },    immediate: true,    deep: true,  },}
1
2
3
4
5
6
7
8
9
10

第三种方案

父组件点击事件无法赋值给子组件弹窗值,解决方法用this.$nextTick()生命周期

<!-- 用这个 点击把id带入传参对应每行的id打开弹窗 --><!-- data是表格每一行的数据传入getSku点击事件里面了 --><template #cell(sku)="data">	<span class="__link" @click="getSku(data)">		{{ data.item.mhw_reference_sku}}	</span></template><modalSkuDetails      ref="modalSkuDetailsEdit"  :mhw_reference_sku="mhw_reference_sku" v-if="mhw_reference_sku"></modalSkuDetails>
1
2
3
4
5
6
7
8
9
10
11

data(){	return{	 mhw_reference_sku: '',// 详情参数赋值给弹窗子组件	}}methods:{        getSku(data) {            this.mhw_reference_sku = data.item.mhw_reference_sku            this.$nextTick(() => {                this.$refs.modalSkuDetailsEdit.show();            })            console.log(this.mhw_reference_sku, '我是父组件sukkkkkkk');        },}
1
2
3
4
5
6
7
8
9
10
11
12
13
14

最后

感觉文章好的话记得点个心心和关注和收藏，有错的地方麻烦指正一下，如果需要转载,请标明出处，多谢！！！