vue父子组件传值

最新推荐文章于 2024-04-14 23:34:00 发布

qwer12321ck76

最新推荐文章于 2024-04-14 23:34:00 发布

阅读量121

点赞数

分类专栏： vue

本文链接：https://blog.csdn.net/u012497072/article/details/106235666

版权

vue 专栏收录该内容

58 篇文章 0 订阅

订阅专栏

父组件，子组件传值

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Hello World</title>
	<script src='./vue.js'></script>
</head>
<body>
	<div id="app">
		<counter :count="0" @inc="handleIncrease"></counter>
		<counter :count="0" @inc="handleIncrease"></counter>
		<div>{{total}}</div>
	</div>
	<script>
	<!--父组件通过属性（:count="3"）向子组件传值，子组件通过触发（this.$emit("inc", 2)）的方式向父组件传值-->
		<!--单向传递：父组件传给子组件的数据，子组件不能能直接改变-->
		var counter = {
			props: ['count'],
			template: '<div @click="handleClick">{{number}}</div>',
			data: function() {
				return {
					number: this.count
				}
			},
			methods: {
				handleClick: function() {
					this.number += 2;
					this.$emit("inc", 2)
				}
			}
		}
		var app = new Vue({
			el: '#app',
			components: {
				counter: counter
			},
			data: {
				total: 0,
			},
			methods: {
				handleIncrease: function(step) {
					this.total += step;
				}
			}
		})
	</script>
</body>
</html>

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

qwer12321ck76

关注关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
vue父子组件传值

父组件，子组件传值<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Hello World</title> <script src='./vue.js'></script></head><body> <div id="app"> <counter :count=.
复制链接

扫一扫