4.9 vue自定义事件 

<!DOCTYPE html>
<html>

<head>
	<meta charset="UTF-8">
	<title></title>
	<script src="js/vue.js"></script>
</head>

<body>
	<div id="app">
		<news></news>
	</div>

	<template id="news">
		<div :style='{fontSize:fontSize+"px"}'>
			<h3>新闻列表</h3>
			<sleep :articles="articleList" @add="change"></sleep>
		</div>
	</template>

	<template id="sleep">
		<ul>
			<li v-for="article in articles" :key="article.id">
				<h3>{{article.title}}</h3>
				<button @click="add">放大字号</button>
				<div>{{article.content}}</div>
			</li>
		</ul>
	</template>

	<script>
		new Vue({
			el: '#app',
			components: {
				News: {
					data() {
						return {
							articleList: [
								{ title: '论睡觉的重要性', content: '孔子曰：“中午不睡，下午崩溃”；老子曰：“孔子说的对！”', id: 0 },
								{ title: '论早起的严重性', content: '早起五分钟，蒙逼两小时”', id: 1 },
								{ title: '论手机与睡觉的关联性', content: '睡觉前的最后一件事是放手机，早上起床的第一件事是摸手机', id: 2 },
							],
							fontSize:16,	//字体大小
						}
					},
					template:'#news',
					components:{
						Sleep:{
							props:{
								articles:Array,
							},
							template:'#sleep',
							methods:{
								add(){
									this.$emit('add',3);
								}
							}
						}
					},
					methods:{
						change(step){
							console.log(step)
							this.fontSize+=step;
						}
					}
				}
			}
		});
	</script>
</body>

</html>

　　

posted @ 2022-01-03 15:08  JavaShop  阅读(14)  评论(0)    收藏  举报