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 时,先不写槽,直接写正常的代码,将样式搞定,再抽出槽

    --------小尾巴 ________一个人欣赏-最后一朵颜色的消逝-忠诚于我的是·一颗叫做野的心.决不受人奴役.怒火中生的那一刻·终将结束...
  • 相关阅读:
    设计模式-享元模式
    设计模式-外观模式
    设计模式-桥接模式
    设计模式-适配器模式
    设计模式-代理模式
    java设计模式中用到的UML图
    VS code 初次安装配置
    CMD部分操作、BAT、以及VS SQL部分快捷键
    网络部分
    CMD 中certutil 操作命令
  • 原文地址:https://www.cnblogs.com/tianxiaxuange/p/10394275.html
Copyright © 2011-2022 走看看