11 Vue 父子组件之间更多的传递方式总结~拿去用不用谢

最新推荐文章于 2024-11-05 22:07:06 发布

技术~子云

最新推荐文章于 2024-11-05 22:07:06 发布

阅读量90

点赞数

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

本文链接：https://blog.csdn.net/davice_li/article/details/127478659

版权

vue 专栏收录该内容

29 篇文章 1 订阅

订阅专栏

父子组件之间更多的传递方式

<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8">
		<title>Title</title>
		<script src="../vue.js"></script>
		
	</head>
	<body>
		<div id="app">
			<!-- 父组件通过 属性向子组件传值  count="0" 传入子组件时，是字符串  :count="0"  加个：,这时就是一个js表达式了传过去的值 是数值0-->
			<counter :count="0" ></counter>
			<counter :count="1"></counter>

		</div>

		<script >
			var counter ={
				//子组件接收父组件传过来的值使用的是props
				props: ['count'],   //接收过来后，在子组件中就可以使用count传递过来的值了
				template:"<div>{{count}}</div>"
			}
			var vm = new Vue({
				el:"#app",
				components:{
					counter:counter
				}			
			})
		</script>

	</body>
</html>

增加点击数字的事件，在模板里增加 @click='handleClick'

<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8">
		<title>Title</title>
		<script src="../vue.js"></script>
		
	</head>
	<body>
		<div id="app">
			<!-- 父组件通过 属性向子组件传值  count="0" 传入子组件时，是字符串  :count="0"  加个：,这时就是一个js表达式了传过去的值 是数值0-->
			<counter :count="0" ></counter>
			<counter :count="1" ></counter>

		</div>

		<script >
			var counter ={
				//子组件接收父组件传过来的值使用的是props
				props: ['count'],   //接收过来后，在子组件中就可以使用count传递过来的值了
				data: function() {   //在子组件中绑定写数据需要定义函数形式来实现。
						return {
							number: this.count
						}
				},
				//增加监听点击事件handleClick事件
				template:"<div @click='handleClick'>{{number}}</div>",
				methods:{
					handleClick:function() {
						this.number ++
					}
				}
			}
			var vm = new Vue({
				el:"#app",
				components:{
					counter:counter
				}			
			})
		</script>

	</body>
</html>

增加子组件向父组件进行增加的值。this.$emit() 从子组件，向父组件触发事件。然后绑定事件handleIncrease ,在主控件中handleIncrease 事件。

<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8">
		<title>Title</title>
		<script src="../vue.js"></script>
		
	</head>
	<body>
		<div id="app">
			<!-- 父组件通过 属性向子组件传值  count="0" 传入子组件时，是字符串  :count="0"  加个：,这时就是一个js表达式了传过去的值 是数值0-->
			<counter :count="0" @inc="handleIncrease"></counter>
			<counter :count="1" @inc="handleIncrease"></counter>
			<div>{{total}}</div>

		</div>

		<script >
			var counter ={
				//子组件接收父组件传过来的值使用的是props
				props: ['count'],   //接收过来后，在子组件中就可以使用count传递过来的值了
				data: function() {   //在子组件中绑定写数据需要定义函数形式来实现。
						return {
							number: this.count
						}
				},
				//增加监听点击事件handleClick事件
				template:"<div @click='handleClick'>{{number}}</div>",
				methods:{
					handleClick:function() {
						this.number = this.number + 2;
						this.$emit('inc',2)
					}
				}
			}
			var vm = new Vue({
				el:"#app",
				components:{
					counter:counter
				},
				data:{
					total: 5
				},
				methods:{
					handleIncrease:function(step) {
						// alert(step)
						this.total +=step;
					}
				}			
			})
		</script>

	</body>
</html>

结果，点击 6 或7 每次增加2 。因为传递使用了 step 传递过去了。

单向数据流的规定：父组件可以向子组件传递任何的值，但是子组件不能修改父组件传递过来的值，如果一定要修改就拷贝一份复本出来。