相思资源网 Design By www.200059.com

本文实例为大家分享了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中数组

子组件 和 父组件通信:

vue综合组件间的通信详解

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
  <script src="/UploadFiles/2021-04-02/vue.js">

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持。

标签:
vue,组件,通信

相思资源网 Design By www.200059.com
广告合作:本站广告合作请联系QQ:858582 申请时备注:广告合作(否则不回)
免责声明:本站文章均来自网站采集或用户投稿,网站不提供任何软件下载或自行开发的软件! 如有用户或公司发现本站内容信息存在侵权行为,请邮件告知! 858582#qq.com
相思资源网 Design By www.200059.com

评论“vue综合组件间的通信详解”

暂无vue综合组件间的通信详解的评论...