Vue.js学习笔记，2021.01.30

最新推荐文章于 2024-08-23 13:45:37 发布

QzjAuroraJun

最新推荐文章于 2024-08-23 13:45:37 发布

阅读量217

点赞数 1

分类专栏： Vue.js 文章标签： vue.js javascript

本文链接：https://blog.csdn.net/MaybyYouLove/article/details/113478824

版权

Vue.js 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

1.vue 实现修改子组件的数据，父组件的数据也跟着变化

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0, shrink-to-fit=no, viewport-fit=cover">
		<title>父组件给子组件传参</title>
	</head>
	<body>
		<div id="app">
			<p>这是父组件中的数据：{{numObj.num}}</p>
			<button @click="change()">父组件，修改父组件数据</button>
			
			<hr>
			<v-header :a="numObj"></v-header>
		</div>
		
		<template id="header">
			<div>
				<h1>这是子组件： {{xx.num}}</h1>
				<button @click="change()">子组件，修改父组件数据</button>
			</div>
			{{fn()}}
		</template>
		
		<script src="../js/vue.js"></script>
		<script type="text/javascript">
			// 自定义组件
			var vheader = {
				template: '#header',
				data() {
					return{
						msg: '这是子组件数据',
						xx: this.a
					}
				},
				watch:{
					// 监听变量a的变化，如果a有变化的时候，直接赋值给m。相当于找了个m来接收数据
					a(){
						this.xx = this.a;
					}
				},
				props: ['a'],//接收父组件参数
				methods:{
					change() {
						this.xx.num += 2;//子组件修改父组件参数
					}
				}
			}
			
			new Vue({
				el: '#app',
				data: {
					numObj: {
						num: '这是父组件参数'
					}
				},
				methods:{
					change() {
						this.numObj.num += 1;
					}
				},
				components:{
					'v-header': vheader
				}
			})
		</script>
	</body>
</html>

2.实现修改父组件的数据，子组件的数据也跟着变化

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0, shrink-to-fit=no, viewport-fit=cover">
		<title>子组件给父组件传参</title>
	</head>
	<body>
		<!-- 父组件 -->
		<div id="app">
			<h1>这是父组件- {{msg}}</h1>
			<p>父组件用的子组件的数据：{{childMsg.child}} +++ {{childMsg.last}}</p>
			<button @click="chang()">父组件，修改子组件数据</button>
			<hr>
			
			<!-- 子组件 -->
			<v-head @sends ='getNewMsg'></v-head>
		</div>
		
		<template id="vhead">
			<div>
				<h2>111这是子组件!</h2>
				<p>子组件自己的数据： {{msg.child}}</p>
				<!-- 自动触发fn方法 -->
				{{fn()}}
				
				<button @click="chang()">子组件，修改子组件数据</button>
			</div>
		</template>
		
		
		
		<script src="../js/vue.js"></script>
		<script type="text/javascript">
			var vhead = {
				template: '#vhead',
				data() {
					return {
						msg: {//子组件要传递的参数，对象
							child: '子组件数据111--',
							last:'子组件数据222--'
						}
					}
				},
				methods: {
					fn() {//子组件内部自定义传参方法
						this.$emit('sends',this.msg)
					},
					chang() {
						this.msg.child += 3
					}
				}
			}
			
			new Vue({
				el: '#app',
				data: {
					msg: '*这是父组件数据！*',
					childMsg: ''
				},
				components: {
					'v-head': vhead
				},
				methods:{
					getNewMsg(obj) {
						// 把子组件数据传递给父组件
						this.childMsg = obj
					},
					chang() {
						this.childMsg.child += 6
					}
				}
			})
		</script>
	</body>
</html>

QzjAuroraJun

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
Vue.js学习笔记，2021.01.30

1.vue 实现修改子组件的数据，父组件的数据也跟着变化<!DOCTYPE html><html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0, shrink-to-fit=no, viewport-fit=cover
复制链接

扫一扫

专栏目录