子组件给父组件添加一个属性，视图是否会刷新

最新推荐文章于 2022-11-23 19:40:57 发布

Fade Away

最新推荐文章于 2022-11-23 19:40:57 发布

阅读量164

点赞数

分类专栏：面试总结

本文链接：https://blog.csdn.net/qq_26239917/article/details/99355680

版权

面试总结专栏收录该内容

10 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html>

<head>
	<meta charset="utf-8">
	<title></title>
	<script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script>
	<style>
	.color{
		color:red
	}
	</style>
</head>

<body>
	<div id="app">
		<parentcom :change-data="changeData" :is-active="isActive" :change-new-data='changeNewData' :demo="demo" />
	</div>
	<template id="parent">
		<div>
			<p>{{demo}}</p>
			<p @click="changeNewData($event)" :class="{color:isActive}">changeNewData 创建了新对象,也修改了data,刷新视图</p>
			<p @click="changeData" :class="{color:!isActive}">changeData 未创建新对象，但是确实修改了data,不刷新视图</p>
		</div>
	</template>
</body>
<script type="text/javascript">
	var parentcom = {
		template: "#parent",
		props: ['demo', 'changeData', 'changeNewData','is-active'],
		mounted() {
			console.log("parent", this.$parent)
		}
	}

	//根组件
	new Vue({
		el: "#app",
		data: {
			isActive:true,
			demo: {
				a: 5
			}
		},
		methods: {
			changeData() {
				this.demo['c'] = 7;
				console.log(this.demo)
				this.isActive = !this.isActive;
			},
			changeNewData(e) {
				let event = e || event;
				this.demo = Object.assign({}, this.demo, {
					b: 6
				})
				this.isActive = !this.isActive;
			}
		},
		components: {
			parentcom: parentcom
		},
	})
</script>

</html>