Vue父组件与子组件间的传递

最新推荐文章于 2022-02-19 21:21:31 发布

没.

最新推荐文章于 2022-02-19 21:21:31 发布

阅读量168

点赞数

分类专栏：前端 vue

本文链接：https://blog.csdn.net/xxxhd/article/details/117440526

版权

前端同时被 2 个专栏收录

2 篇文章 0 订阅

订阅专栏

vue

2 篇文章 0 订阅

订阅专栏

Vue父组件与子组件间的传递

1.父组件向子组件传递

通过在子组件中使用 props 来接收父组件传递来的值。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<script src="js/vue.js" type="text/javascript" charset="utf-8"></script>
	</head>
	<body>
		<div id="app">
			
			<ul>
				<schoolname v-for="item in schoolList" :name="item"></schoolname>
			</ul>
		
		</div>
		
		
		
	</body>
	
	<script type="text/javascript">
		
		Vue.component("schoolname",{
			props:['name'],
			template:`<li>
			<h3>学校名字：{{name}}</h3>
			</li>`,
		})
		
		let app = new Vue({
			el:'#app',
			data:{		
				schoolList:["清华","北大","中大"],
			}

		})
	</script>
</html>

以下面例子：在子组件中使用 $emit 将子组件的值向父组件传递，
如
1、this.$emit('childvalue',name) 触发一个叫 childvalue的事件并且传递 name 值。
2、@childvalue='changeEvent' 监听了一个叫 childvalue的事件事件发生触发 changeEvent函数。
3、在父组件中创建 changeEvent:function(data) 函数并用data接收子组件传递过来的值。

2. 子组件向父组件传递

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<script src="js/vue.js" type="text/javascript" charset="utf-8"></script>
	</head>
	<body>
		<div id="app">
			
			<ul>
				<!-- @childvalue监听 childvalue事件  事件发生触发  changeEvent函数-->
				<schoolname @childvalue='changeEvent' v-for="item in schoolList" :name="item"></schoolname>
			</ul>

			<h2>选中的学校是：{{chooseSchool}}</h2>
	
		</div>
		
		
		
	</body>
	
	<script type="text/javascript">
		
		Vue.component("schoolname",{
			props:['name'],
			template:`<li>
			<h3>学校名字：{{name}}</h3>
			<button  @click="chooseEvent(name)">选择学校</button>
			</li>`,
	
			methods:{
				chooseEvent:function(name){
					console.log(name);
					// 将子组件的值向父组件传递
					//触发一个叫 childvalue的事件 并且传递name值
					this.$emit('childvalue',name)
					
					
				}
			}
			
		})
		
		let app = new Vue({
			el:'#app',
			data:{
				
				schoolList:["清华","北大","中大"],
				chooseSchool:""				
			},
			methods:{
				changeEvent:function(data){

					console.log(data);
					
					this.chooseSchool=data;
				
				}
			}

		})
	</script>
</html>

没.

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Vue父组件与子组件间的传递

Vue父组件与子组件间的传递1.父组件向子组件传递通过在子组件中使用 props 来接收父组件传递来的值。<!DOCTYPE html><html> <head> <meta charset="utf-8" /> <title></title> <script src="js/vue.js" type="text/javascript" charset="utf-8"></script>
复制链接

扫一扫