#yyds干货盘点#16.父子组件事件通信

【#yyds干货盘点#16.父子组件事件通信】笛里谁知壮士心，沙头空照征人骨。这篇文章主要讲述#yyds干货盘点#16.父子组件事件通信相关的知识，希望能为你提供帮助。
一、父子组件间通信组件之间必然需要相互通信：

父组件可能要给子组件下发数据
子组件则可能要将它内部发生的动态行为告知父组件
非父子组件之间也可能会有数据和行为的通信

< !-- 父组件向子组件传递数据-->
< my-component :items="users"> < /my-component>

Vue.component(my-component,
template: `
< div> < button @click="myclick"> 单击以触发父元素更新< /button> < /div>
`,
methods:
myclick: function()

);

父元素通过 props 向子组件传递数据
子组件通过事件给父组件触发更新行为

文章图片
< 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中引入即可??