通过事件向父组件发送消息

最新推荐文章于 2023-11-21 13:10:37 发布

谁动了我的bug

最新推荐文章于 2023-11-21 13:10:37 发布

阅读量169

点赞数

分类专栏： Vue 文章标签：通过事件向父组件发送消息

本文为whhtjl原创文章，未经博主允许不得转载。

本文链接：https://blog.csdn.net/qq_35393693/article/details/103107895

版权

Vue 专栏收录该内容

14 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html lang="en">

	<head>
		<meta charset="UTF-8">
		<title>通过事件向父组件发送消息</title>
		<style>
			* {
				padding: 0;
				margin: 0;
			}
			
			.main {
				width: 100%;
			}
			
			.head {
				width: 100%;
				height: 80px;
				background-color: purple;
			}
			
			.main2 {
				width: 100%;
				height: 1000px;
			}
			
			.main2 .aside {
				float: left;
				width: 30%;
				height: 100%;
				background-color: green;
			}
			
			.main2 .content {
				float: left;
				width: 70%;
				height: 100%;
				background-color: red;
			}
		</style>
	</head>

	<body>
		<div id="app"></div>
		<script type="text/javascript" src="../js/vue.js"></script>
		<script type="text/javascript">
			// 全局组件

			// 第一个参数是组件的名字，第二个参数是options

			// 1.在父组件中  先绑定  :自定义的属性名 = posts
			// 2.子要声明 props:['自定义的属性名']  来接收
			// 3.收到了就是自己 你可以任意使用

			// bootstrap  下拉菜单  html+css+js
			Vue.component('Vbtn', {
				template: `
				<button>按钮</button>
			`
			});

			var Vcontent = {
				template: `
				<div class='content'>我是内容组件
					<ul>
						<li v-for = '(item,index) in posts'>
							<h3>{{item.title}}</h3>
							<h4>{{item.content}}</h4>
						</li>

					</ul>
				</div>
			`,
				props: ['posts']
			}

			var Vaside = {
				template: `
				<div class='aside'>我是侧边栏组件
					
				</div>
			`
			};

			// 局部组件：声子  挂子 用子
			var Vheader = {
				template: `
				<div class='head'>
					我是头部组件
					<button @click = 'changeFontSize'>字体变大</button>
				</div>
			`,
				methods: {
					changeFontSize() {

						// 触发父组件 中声明的自定义事件   vue $emit()
						// 第一个参数是触发自定义事件的名字 第二个参数就是传进去的值
						this.$emit('change')
					}
				}
			};

			// 1.声明局部组件 App入口组件
			var App = {
				template: `
				<div class='main' :style = '{fontSize:postFontSize+"em"}'>
					<Vheader @change = 'changeHandler'/>
					<div class = 'main2'>
						<Vaside />
						<Vcontent  :posts = 'posts'/>
					</div>
				</div>
			`,
				methods: {
					changeHandler() {
						this.postFontSize += .1;
					}
				},
				data() {
					return {
						posts: [{
								id: 1,
								title: "我的第一篇博客",
								content: '天王该帝王'
							},
							{
								id: 2,
								title: "我的第二篇博客",
								content: '小鸡炖蘑菇'
							},
							{
								id: 3,
								title: "我的第三篇博客",
								content: '宝塔镇河妖'
							}

						],
						postFontSize: 1

					}
				},
				components: {
					Vheader,
					Vaside,
					Vcontent
				}
			};

			new Vue({
				el: '#app',
				// 3.使用
				template: '<App></App>',
				data() {
					return {

					}
				},
				// 2.挂载组件
				components: {
					App
				}
			});
		</script>

	</body>

</html>