vue单项数据流

最新推荐文章于 2023-11-15 08:29:01 发布

原克技术

最新推荐文章于 2023-11-15 08:29:01 发布

阅读量130

点赞数

文章标签： vue vue.js javascript html5

本文链接：https://blog.csdn.net/weixin_44432032/article/details/108693197

版权

单向数据流
props是单向绑定的，当父组件的属性变化时，将传导给子组件，但是不会反过来
而且不允许子组件直接修改父组件中的数据，报错
解决方式：
方式1：如果子组件想把它作为局部数据来使用，可以将数据存入另一个变量中再操作，不影响父组件中的数据
方式2：如果子组件想修改数据并且同步更新到父组件，两个方法：
a.使用.sync（1.0版本中支持，2.0版本中不支持，2.3版本又开始支持）
需要显式地触发一个更新事件
b.可以将父组件中的数据包装成对象，然后在子组件中修改对象的属性(因为对象是引用类型，指向同一个内存空间)，推荐

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>单向数据流</title>
	<script src="js/vue.js"></script>
</head>
<body>
	<div id="itany">
		<h2>父组件：{{name}}</h2>
		<input type="text" v-model="name">
		<h2>父组件：{{user.age}}</h2>

		<hr>

		<my-hello :name.sync="name" :user="user"></my-hello>
	</div>
	
	<template id="hello">
		<div>
			<h3>子组件：{{name}}</h3>
			<h3>子组件：{{user.age}}</h3>
			<button @click="change">修改数据</button>
		</div>
	</template>

	<script>
		var vm=new Vue({ //父组件
			el:'#itany',
			data:{
				name:'tom',
				user:{
					name:'zhangsan',
					age:24
				}
			},
			components:{
				'my-hello':{ //子组件
					template:'#hello',
					props:['name','user'],
					data(){
						return {
							username:this.name //方式1：将数据存入另一个变量中再操作
						}
					},
					methods:{
						change(){
							// this.username='alice';
							// this.name='alice';
							// this.$emit('update:name','alice'); //方式2：a.使用.sync，需要显式地触发一个更新事件
							this.user.age=18;
						}
					}
				}
			}
		});	
	</script>
</body>
</html>

原克技术

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
0
评论
vue单项数据流

单向数据流props是单向绑定的，当父组件的属性变化时，将传导给子组件，但是不会反过来而且不允许子组件直接修改父组件中的数据，报错解决方式：方式1：如果子组件想把它作为局部数据来使用，可以将数据存入另一个变量中再操作，不影响父组件中的数据方式2：如果子组件想修改数据并且同步更新到父组件，两个方法：a.使用.sync（1.0版本中支持，2.0版本中不支持，2.3版本又开始支持）需要显式地触发一个更新事件b.可以将父组件中的数据包装成对象，然后在子组件中修改对象的属性(因为对象是引用类型，指向同
复制链接

扫一扫