8 Vue-通过事件向父组件发送消息

行走的皮卡丘

已于 2022-05-30 09:52:26 修改

阅读量465

点赞数 19

分类专栏： Vue学习基础文章标签： vue js html

于 2020-08-05 23:07:08 首次发布

本文链接：https://blog.csdn.net/weixin_44908159/article/details/107827673

版权

Vue学习基础专栏收录该内容

27 篇文章 11 订阅

订阅专栏

在这里插入图片描述

8 Vue-通过事件向父组件发送消息

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>行找的皮卡丘</title>
	</head>
	<body>
		<div id="app">


		</div>

	</body>
	<script type="text/javascript" src="js/vue.min.js">

	</script>

	<script type="text/javascript">
		// 声明两个全局组件Parent  Child
		Vue.component('Child', {
			template: `
				<div>
					我是一个子组件
					<input type='text' v-model='ChildData' v-on:input='changeValue(ChildData)'/>
				</div>
			`,
			methods: {
				changeValue(val) {
					// 自定义事件childHeader一定通过$emit去触发
					// 在函数中使用$emit触发自定义的事件childHeader
					// $emit('自定义的事件名','要发送的消息')
					this.$emit('childHeader', val)
				}
			},
			props: ['ChildData'],
		})

		// 子组件往父组件传值
		// 1、在父组件绑定自定义的事件
		// 2、在子组件中触发原生的事件 在函数中使用$emit触发自定义的事件childHeader
		Vue.component('Parent', {
			data() {
				return {
					msg: "我是父组件数据"
				}
			},
			template: `
				<div>
					我是一个父组件
					<Child :ChildData='msg' @childHeader='childHeader'/>
				</div>
			`,
			methods: {
				childHeader(val) {
					console.log(val);
				}
			}
		})


		new Vue({
			el: "#app",
			data() {
				return {

				}
			},

			// 使用组件
			template: `<parent/>`,
		});
	</script>
</html>