• vue 组件间的通信


    (1)props:用于父组件向子组件传递消息

    使用方法:

    在父组件中,使用子组件时,<Child v-bind:data="data"/>,通过v-bind把子组件需要的数据传递给子组件;

    在子组件中通过props来接受传过来的数据,常用写法:props:['data',......]/props:{data:dataType,.....} 

    举例:

    (2)自定义事件:用于子组件向父组件传递消息

    使用方法:

    在父组件中,对子组件的标签绑定一个自定义的事件监听,<Child @todo="todo"/>;

    在子组件中通过 vm.$emit('todo',data),来触发绑定在子组件上的事件,也即触发定义在父组件中的自定义事件,从而把data从子组合传递到父组件

    举例:

    (3)solt 标签(插槽):用于父组件向子组件传递标签数据

    使用方法:

    子组件:Child.vue

    <template>
        <div>
            <slot name="xxx">不确定的标签结果1</slot>
            <div>子组件中确定的标签结构</div>
            <slot name="yyy">不确定的标签结果2</slot>
        </div>
    </template>

    父组件:Parent.vue

    <Child>
    <div slot="xxx">xxx处对应的标签结构</div>
    <div slot="yyy">yyy处对应的标签结构</div>
    </Child>

    相当于,子组件中的slot标签知识占个位置,里边的内容由父组件中对应的内容来决定

    (4)PubSub库:可以在任意组件间互相传递消息

    1>安装:npm install pubsub-js

    2>引入:import PubSub from “pubsub-js”;

    3>在需要的组件中订阅和取消订阅:

    如:在A组件中,发布一个消息:

    PubSub.publish('name',data);

    在B组件中,订阅/监听/接受这个消息 :

    PubSub.subscribe('name',(msg,data)=>{

    //可以对传过来的data进行处理

    })

    注意:A、B组件均需要引入PubSub库

  • 相关阅读:
    valgrind 内存调试工具
    centos7 firewall 相关
    linux timer operate
    string int 相互转换
    shared_ptr(作为局部变量返回)
    计算机网络--02物理层
    计算机网络学习笔记--01概述
    java基础---字符串string
    java基础--static关键字的使用
    java基础---java语言概述
  • 原文地址:https://www.cnblogs.com/lihuijuan/p/9982855.html
Copyright © 2020-2023  润新知