前端vue.js道

5 父子组件之间的通讯和slot

2016-11-16  本文已影响70人  0efb885b580c

子集获取父集

    子组件之内:
    props:{
        'm':String,
        'myMsg':Number
    }
     在调用子组件上写:  
     <bbb :m="数据"></bbb>

父级获取子集

子组件把自己的数据,发送到父级
    vm.$emit(事件名,数据);
父级@事件名接受
         v-on:  @
子集
this.$emit('child-msg',this.a);
父级
<bbb @child-msg="get"></bbb>
//父级方法中
get(msg){
    this.msg=msg;
}
废弃
vm.$dispatch(事件名,数据)    子级向父级发送数据
vm.$broadcast(事件名,数据)   父级向子级广播数据
    配合: event:{}
    在vue2.0里面已经,报废了

slot位置、槽口

作用: 占个位置
<aaa>//使用组件模版
    <ul>
        <li>1111</li>
        <li>2222</li>
        <li>3333</li>
    </ul>
</aaa>
<aaa></aaa>//这显示<h1>xxxx</h1>这是默认的情况
<template id="aaa">
    <h1>xxxx</h1>
    <slot>这是默认的情况</slot>//组件模版里的东西都显示在这,如果没有的话就是slot里的东西
</template>
如果有多个
上一篇 下一篇

猜你喜欢

热点阅读