vue中父组件传数组给子组件，部分属性不传时使用默认值

最新推荐文章于 2023-12-24 16:02:20 发布

Mr_查

最新推荐文章于 2023-12-24 16:02:20 发布

阅读量677

点赞数

分类专栏： vue 文章标签： vue.js 前端

本文链接：https://blog.csdn.net/Hellow_Mr/article/details/125327585

版权

vue 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

这篇博客探讨了在Vue中如何处理父组件向子组件传递数据的情况。当父组件未提供特定属性时，子组件通过计算属性设置默认值。示例展示了子组件如何定义默认配置，包括标题、按钮文本等，并在父组件中仅传入部分配置。这为开发者提供了一种灵活的方式来管理组件的默认行为和自定义选项。

摘要由CSDN通过智能技术生成

//子组件 父组件未传leftBtnText，展示出默认值“取消”
<template>
    <view>
         <view>{{configs.leftBtnText}}</view>
         <view>{{configs.title}}</view>
    </view>
</template>        
props:{
	config: {
		type: Object,
		default: () => {}
	}
},
//用计算属性处理父组件传来的config值
computed: {
	configs() {
		return Object.assign({
			title:'',
			content:'',
			leftBtnText:'取消',
			rightBtnText:'确定',
			leftBtnColor:'#fff',
			rightBtnColor:'#fff',
		}, this.config);
	}
}

//父组件
<template>
    <child-components :config='config'></child-components>
</template>  
<script>
import ChildComponents from './childComponents'
export default {
    components: {
        ChildComponents
    },
    data() {
        return {
            config: {
                title: '我是标题'
            }
        }
    }
}
</script>