4.8 单项数据流 

<!DOCTYPE html>
<html>

<head>
	<meta charset="UTF-8">
	<title></title>
	<script src="js/vue.js"></script>
</head>

<body>
	<div id="app">
		<lao-wang></lao-wang>
	</div>

	<template id="laowang">
		<div>
			老王年龄为：{{age}}
			<button @click="addAge">增加老王的年龄</button>
			<xiao-wang :father-age="age"></xiao-wang>
		</div>
	</template>

	<template id="xiaowang">
		<div>
			小王接收到的年龄：{{newAge}}
			<button @click="addAge">增加老王的年龄</button>
		</div>
	</template>
	<script>
		new Vue({
			el: '#app',
			components: {
				LaoWang:{
					data(){
						return {
							age:40
						}
					},
					template:'#laowang',
					methods:{
						addAge(){
							this.age++;
						}
					},
					components:{
						XiaoWang:{
							data(){
								return {
									newAge:this.fatherAge,
								}
							},
							props:{
								'fatherAge':Number
							},
							template:'#xiaowang',
							methods:{
								addAge(){
									//this.fatherAge++;
									this.newAge++;
								}
							}
						}
					}
				}
			}
		});
	</script>
</body>

</html>

　　2.父组件修改数据，子组件联动数据被修改（默认）：这种情况下，默认子组件是不能修改父组件数据的，修改方法见4.9自定义事件

<!DOCTYPE html>
<html>

<head>
	<meta charset="UTF-8">
	<title></title>
	<script src="js/vue.js"></script>
</head>

<body>
	<div id="app">
		<lao-wang></lao-wang>
	</div>

	<template id="laowang">
		<div>
			老王年龄为：{{age}}
			<button @click="addAge">增加老王的年龄</button>
			<xiao-wang :father-age="age"></xiao-wang>
		</div>
	</template>

	<template id="xiaowang">
		<div>
			小王接收到的年龄：{{fatherAge}}
		</div>
	</template>
	<script>
		new Vue({
			el: '#app',
			components: {
				LaoWang:{
					data(){
						return {
							age:40
						}
					},
					template:'#laowang',
					methods:{
						addAge(){
							this.age++;
						}
					},
					components:{
						XiaoWang:{
							props:{
								'fatherAge':Number
							},
							template:'#xiaowang',
						}
					}
				}
			}
		});
	</script>
</body>

</html>

　　

posted @ 2022-01-03 15:07  JavaShop  阅读(31)  评论(0)    收藏  举报