vue综合组件间的通信详解

网友投稿 294 2023-03-20


vue综合组件间的通信详解

本文实例为大家分享了vue综合组件间的通信,供大家参考,具体内容如下

实现一个ToDoList。

①完成所有的组件的创建和使用

②add

点击add按钮时候,将用户输入的内容(todoinput),显示在(todolist)

核心代码:兄弟组件间通信

步骤1:var bus = new Vue()

步骤2:在准备接受数据的组件

bus.$on('addEvent',function(){

})

步骤3:触发事件

bus.$emit('addEvent',123)

将todolist中数组的元素 渲染在todoitem的每一个span标签。(父子组件通信)

③delete

在todoitem中点击delete按钮时,将该todoitem删除,由于todoitem的数量 取决于 todolist中数组

子组件 和 父组件通信:

{{msg}}


版权声明:本文内容由网络用户投稿,版权归原作者所有,本站不拥有其著作权,亦不承担相应法律责任。如果您发现本站中有涉嫌抄袭或描述失实的内容,请联系我们jiasou666@gmail.com 处理,核实后本网站将在24小时内删除侵权内容。

上一篇:api接口文档(api接口文档怎么看)
下一篇:接口文档编写测试用例(接口测试用例编写要点)
相关文章

 发表评论

暂时没有评论,来抢沙发吧~