zoukankan      html  css  js  c++  java
  • vue_组件间通信:自定义事件、消息发布与订阅、槽

    自定义事件

    只能用于 子组件 向 父组件 发送数据

    可以取代函数类型的 props

    在父组件: 给子组件@add-todo-event="addTodo"

    在子组件: 相关方法中,this.$emit("add-todo-event", newTodo);

    pubsub 消息发布/订阅

    实现任意关系的组件间通信

    yarn add pubsub-js

    实例:

    • 子组件发布消息: 要求删除 todo

    methods: {

    PubSub.publish("deleteTodo", this.index);

    }

    • 父组件订阅消息: 执行回调,删除 todo

    mounted: {

    PubSub.subscribe("deleteTodo",(messageName, todosIndex)=>{

    this.deleteTodo(todosIndex);

    });

    }

    插槽内容 slot

    父组件 向 子组件传递"标签数据"

    应对: 不仅数据是动态的,结构也是动态的

    App.vue 父组件 使用子组件时,声明用哪些槽:

     

    <Child>

    </Child>

     

    子组件Child 定义槽:

    <template>


    </template>

    插槽显示的顺序,由子组件编码决定

    细节: 在写公共组件 Child 时,先不写槽,直接写正常的代码,将样式搞定,再抽出槽

    --------小尾巴 ________一个人欣赏-最后一朵颜色的消逝-忠诚于我的是·一颗叫做野的心.决不受人奴役.怒火中生的那一刻·终将结束...
  • 相关阅读:
    HDU 1251 统计难题(字典树模板题)
    POJ 1182 食物链(带权并查集)
    FJUT 2351 T^T的图论(并查集)
    10.QT程序框架与connect
    9.正则表达式
    8.QList QMap QVariant
    7.treeview
    6.图形化列表查询显示
    5.listview(QStringList QStringListModel)
    4.QList
  • 原文地址:https://www.cnblogs.com/tianxiaxuange/p/10394275.html
Copyright © 2011-2022 走看看