Vue父子组件间数据传递

最新推荐文章于 2024-06-12 10:51:45 发布

Feather_74

最新推荐文章于 2024-06-12 10:51:45 发布

阅读量232

点赞数

分类专栏： Vuex 文章标签： Vue

本文链接：https://blog.csdn.net/qq_44997147/article/details/101598351

版权

Vuex 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

父子组件是两个单独的组件，不存在数据的传递
在这里插入图片描述

父组件传递给子组件（子组件访问父组件）

1、在父组件的template中的子组件进行v-bind绑定
2、在子组件中定义props进行接收

子组件传递给父组件（父组件访问子组件）

1、在子组件的template中定义一个button，并写一个方法
2、在方法里面使用vm.$emit
3、父组件进行监听。在父组件template中的子组件写入@
4、在父组件中定义方法，获取子组件传过来的数据

代码

<body>
		<div id="app">
			<fan></fan>
			<!-- 子组件不能放在这里，要放到父组件的template中 -->
		</div>
		<template id="xing">
			<div>
				<h1>这是父组件，父组件的数据有:{{myname}},{{mysex}},{{myage}},{{mylove}}</h1>
				<!-- 检测props是在这里删 -->
				<mengyu :funame="myname" :fusex="mysex" :fuage="myage" :fulove="mylove" @sendto="zishuju"></mengyu>
				<h2>父组件访问子组件的数据有：{{mytizhong}},{{myzhijia}}</h2>
			</div>
		</template>
		<template id="ming">
			<div>
				<!-- 单向数据流 -->
				<h1>这是子组件,子组件的数据有:{{zhijia}},{{tizhong}}</h1>
				<h2>子组件访问父组件的数据有:{{funame}},{{fusex}},{{fuage}},{{fulove}}</h2>
				<button @click="send">子组件发送数据给父组件</button>
			</div>
		</template>
	</body>

<script>
		var vm = new Vue({ //根组件
			el: '#app',
			components: {
				'fan': {
					methods: {
						zishuju(tizhong,zhijia) {//这里的体重是指从子组件传过来的体重
							this.mytizhong = tizhong;
							this.myzhijia = zhijia;
						}
					}, //父组件
					data() {
						return {
							myname: 'fanmi',
							mysex: 'girl',
							myage: 18,
							mylove: [
								{id: 0,suo: 'lhr'}, 
								{id: 1,suo: 'yyqx'}, 
								{id: 3,suo: 'pyc'}, 
								{id: 4,suo: 'lyf'},
								],
							mytizhong: '',
							myzhijia: '',
						}
					},
					template: '#xing',
					// 子组件是直接写在后面
					components: {
						'mengyu': {
							data() {
								return {
									tizhong: 100,
									zhijia: 'shihongse',
								}
							},
							template: '#ming',
							//props:['fu'],//一定要加[]
							props: {
								funame: String,
								fusex: {
									type: String,
								},
								fuage: {
									type: Number,
									required: true,
									default: 21,
								},
								fulove: {
									type: Array,
									validator: function(val) {
										return {
											default: 'myself',
										}
									}
								},
							},
							methods: {
								send() {
									this.$emit('sendto', this.tizhong, this.zhijia);
								}
							}
						}
					}
				},
			}
		})
	</script>