【#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中引入即可??
推荐阅读
- #2021年底大盘点#Spring认证中国教育管理中心-Apache Geode 的 Spring 数据教程十一
- DevTools 实现原理与性能分析实战
- #yyds干货盘点#Java双刃剑之Unsafe类详解
- 多宿主语言跨平台平部署的开源图形化脚本语言-OpenBlock
- 学习Java必备的基础知识打卡12.27,要想学好必须扎实基本功(?建议收藏)#yyds干货盘点#
- 微服务架构 | 怎样解决超大附件分片上传()
- OPPO大数据计算集群资源调度架构演进
- events
- infos