如下所示,有这样一个props,当它不为空时,尝试将其改为空数组

<script>
	props: {
		selectedTags: {
	      type: Array,
	      default: () => {
	        return []
	      }
	    },
	},
	created() {
		this.onChange();
	},
	methods: {
		onChange() {
			this.selectedTags = [];
		}
	}
</script>

结果报如下错误
在这里插入图片描述
打印一下selectedTags的内容

selectedTags: [
	{color:"2", id:"5f351fa5da01ee000170987c", name:"京东白条32223"},
	{color:"1", id:"5f351faada01ee000170987d", name:"京东物流2332"},
	{color:"1", id:"5f351fc0da01ee000170987e", name:"京东金融234232"}
]

那么只修改数组中元素的属性值,也会报错吗?在data里面定义obj,属性设置如下

<script>
	props: {
		selectedTags: {
	      type: Array,
	      default: () => {
	        return []
	      }
	    },
	},
	data() {
		return {
			obj: {
				color: "4",
				id: "5f351fa5da01ee000170987c",
				name: "拼多多"
			}
		}
	}
	created() {
		this.onChange();
	},
	methods: {
		onChange() {
			this.selectedTags.forEach((item) => {
				if(item.id == this.obj.id) {
					item.name = this.obj.name;
					item.color = this.obj.color;
				}
			})
		}
	}
</script>

运行没有报错,再次打印selectedTags,可以看到内容已被修改,说明props为引用类型的话,属性值是可以修改的

selectedTags: [
	{color:"4", id:"5f351fa5da01ee000170987c", name:"拼多多"},
	{color:"1", id:"5f351faada01ee000170987d", name:"京东物流2332"},
	{color:"1", id:"5f351fc0da01ee000170987e", name:"京东金融234232"}
]

项目中遇到很多父子组件嵌套的场景,比如父组件中有一些概览信息,子组件中是详情数据,例如表格。数据由父组件通过xhr请求获取,然后传参给子组件,在子组件中通过props接收,然后通过监听props的变化,将该值传给data。在很多业务场景中,子组件的详情数据都需要支持编辑操作,编辑操作通常是做两件事,一个是通过接口向后端发送更新的数据,二是更新组件的data,以更新视图。但是如果只更新子组件自己的data,那就无法与父组件保持同步,概览信息无法更新。为使父子组件之间能够同步数据,通常的做法包括:子组件向父组件传递更新的数据、让父组件从接口拉一下数据、强制刷新父组件。这样的做法很容易产生冗余数据,同样的数据在父组件和子组件都做了拷贝,没有必要,而且代码耦合度增加,导致组件复用困难。

本人在实践中发现,子组件的props传值给data其实没有必要。为什么要传值给data,因为一般认为,props的值是只读的,只有data才可以修改,所以要将props传给data。但是本人发现,props实际上和es6里的const很像,并非不能修改。当props的值为引用类型(这里有待确认),例如对象,它的属性值是可以通过v-model修改的,因此展示和修改数据都可以用props。而且在子组件中修改props还会直接同步到父组件的data,两端数据会始终保持同步,不需要再进行额外的传参。

Logo

前往低代码交流专区

更多推荐