Vue学习笔记4.2 父子组件传递

最新推荐文章于 2022-12-30 16:07:32 发布

@凌晨三点半

最新推荐文章于 2022-12-30 16:07:32 发布

阅读量176

点赞数

分类专栏： Vue.js 文章标签： Vue 父子组件传递数据 $emit

本文链接：https://blog.csdn.net/soulwyb/article/details/86593025

版权

Vue.js 专栏收录该内容

64 篇文章 5 订阅

订阅专栏

<!DOCTYPE html>
<html>
<head>
	<title>父子组件传递</title>
	<meta charset="utf-8">
	<script src="vue.js"></script>
</head>
<body>
	<!-- 演示案例大体内容是通过父组件传递给子组件初始值，然后监听子组件的数据变化 计算出和（total） -->
	<div id="app">
		<!-- :content是表示父组件向子组件传递数据 @change是父组件监听子组件的'change'事件 -->
		<counter :content = "0" @change="handleChangeClick"></counter>
		<counter :content="1" @change="handleChangeClick"></counter>
		<div>{{total}}</div>
	</div>
</body>
<script>
	// 子组件
	var counter = {
		// 子组件接收父组件的数据时需要加上props：[]
		props: ['content'],
		// 子组件使用data函数时需要用函数返回 而不是像根组件那样直接写名称与值
		// Vue是单向数据流。所以父组件可以向子组件任意传数据，但是子组件不能随便修改父组件的数据。
		// 所以需要使用data函数来创建父组件数据的副本。
		data: function() {
			return {
				number: this.content
			}
		},
		// 通过点击事件触发handleClick函数
		template: '<div @click="handleClick">{{number}}</div>',
		methods: {
			handleClick: function() {
				this.number ++
				// 子组件向父组件传递数据需要使用$emit()函数。函数的第一个参数是索要触发事件的名称，后面的都是索要传递的值
				// 可以1个也可以多个值
				this.$emit('change', 1, 2)
			}
		}
	}

	var vm = new Vue({
		el:'#app',
		data: {
			total: 1
		},
		// 父组件添加子组件
		components: {
			counter: counter
		},
		methods: {
			// 父组件接收子组件传递的数据在step中,几个参数传递，这里形参就设置几个
			handleChangeClick: function(step, step2) {
				this.total += step
				console.log(step2)
			}
		}
	})
</script>
</html>

@凌晨三点半

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
0
评论
Vue学习笔记4.2 父子组件传递

&lt;!DOCTYPE html&gt;&lt;html&gt;&lt;head&gt; &lt;title&gt;父子组件传递&lt;/title&gt; &lt;meta charset="utf-8"&gt; &lt;script src="vue.js"&gt;&lt;/script&gt;&lt;/head&
复制链接

扫一扫