zoukankan      html  css  js  c++  java
  • 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库

  • 相关阅读:
    NHibernate4使用Oracle.ManagedDataAccess.dll连接oracle及配置多个数据库连接
    Myeclipse闪退故障
    Log4j快速使用精简版
    Eclipse快捷键 10个最有用的快捷键
    Java compiler level does not match解决方法
    ArcMap常用VBA
    firefox浏览器中silverlight无法输入问题
    C#导入Excel遇到数字字母混合列数据丢失解决
    ArcMap计算PolyLine中点VBA
    Apple Watch 开发详解
  • 原文地址:https://www.cnblogs.com/lihuijuan/p/9982855.html
Copyright © 2011-2022 走看看