#yyds干货盘点#16.父子组件事件通信
Posted 江下下啊
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了#yyds干货盘点#16.父子组件事件通信相关的知识，希望对你有一定的参考价值。
一、父子组件间通信
组件之间必然需要相互通信：
- 父组件可能要给子组件下发数据
- 子组件则可能要将它内部发生的动态行为告知父组件
- 非父子组件之间也可能会有数据和行为的通信
<!-- 父组件向子组件传递数据-->
<my-component :items="users"></my-component>
Vue.component(my-component,
template: `
<div><button @click="myclick">单击以触发父元素更新</button></div>
`,
methods:
myclick: function()
);
- 父元素通过 props 向子组件传递数据
- 子组件通过 事件 给父组件触发更新行为
二、父子组件间事件通信
子组件向父组件发送消息，使用Vue自定义事件机制
- 子组件使用 $emit 向父组件触发事件
- 父组件使用 $on 或 v-on 监听子组件事件
Vue.component(my-component,
template: #my-component,
props: [value],
methods:
emitEvent: function()
console.log(child component click event);
this.$emit(childevent);
);
<div id="app">
<my-component @childevent="handleEvent"></my-component>
</div>
- 子组件向父组件发送事件消息时，可以一并传递其它附加数据
- 父组件直接在事件监听函数中通过形参获取这些附加数据参数（也可以 使用 arguments [ ] 数组接收）
emitEvent: function()
this.$emit(childevent, 附加数据)
handleEvent: function()
console.log(arguments[0]);
三、父子组件间通信（html代码）
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>父子组件间通信</title>
</head>
<body>
<div id="app">
<!-- 使用组件 -->
<my-component :message="message" @my-component-event="handleMyComponentEvent"></my-component>
<h6>父元素内容</h6>
<p>message==message</p>
</div>
<template id="my">
<div>
<p>message=message</p>
<p>
<button @click="handleClick">点击以更新父元素</button>
</p>
</div>
</template>
<script src="vue.js"></script>
<script>
//创建组件
const myComponent =
template: #my,
//props接收父元素数据
props: [message],
//方法
methods:
handleClick:function()
//向父元素发射事件消息
//参数1：表示自定义事件的名称
//自定义事件的名称要使用短横线连接形式
//参数2：表示传递给父元素附加数据
this.$emit(my-component-event,update message from child);
//Vue实例对象
var vm = new Vue(
el: #app,
data:
message : from parent
,
//注册组件
components:
myComponent
,
//父元素methods
methods:
//接收到子组件的自定义事件并处理之
handleMyComponentEvent: function(param)
console.log(接收到了子组件触发的事件);
//this.message = param;
this.message=arguments[0];
);
</script>
</body>
</html>
注：一定要引入Vue.js点击链接下载开发版或生产版本在html中引入即可
以上是关于#yyds干货盘点#16.父子组件事件通信的主要内容，如果未能解决你的问题，请参考以下文章
#yyds干货盘点#Vue事件车，非父子组件通讯$bus,$event,中央事件总线
#yyds干货盘点# react笔记之学习之props父子传值
#yyds干货盘点 react笔记之学习之props父子传值