vue 知识点总结之组件通信、插槽

1.组件传值、通信

属性props

// child
props: { msg: String }
// parent
<HelloWorld msg="Welcome to Your Vue.js App"/>


引用refs

// parent
<HelloWorld ref="hw"/>
this.$refs.hw.xx = 'xxx'


子组件chidren

// parent
this.$children[0].xx = 'xxx'


子组件 => 父组件:自定义事件

// child
this.$emit('add', good)
// parent
<Cart @add="cartAdd($event)"></Cart>


兄弟组件:通过共同祖辈组件
通过共同的祖辈组件搭桥,$parent或$root。

// brother1
this.$parent.$on('foo', handle)
// brother2
this.$parent.$emit('foo')

祖先和后代之间
provide/inject:能够实现祖先给后代传值

// ancestor
provide() {
    return {foo: 'foo'}
}
// descendant
inject: ['foo']

任意两个组件之间:事件总线 或 vuex
事件总线:创建一个Bus类负责事件派发、监听和回调管理

// Bus:事件派发、监听和回调管理
class Bus{
    constructor(){
        // {
        // eventName1:[fn1,fn2],
        // eventName2:[fn3,fn4],
        // }
        this.callbacks = {}
    }
    $on(name, fn){
        this.callbacks[name] = this.callbacks[name] || []
        this.callbacks[name].push(fn)
    }
    $emit(name, args){
        if(this.callbacks[name]){
            this.callbacks[name].forEach(cb => cb(args))
        }
    }
}
// main.js
Vue.prototype.$bus = new Bus()
// child1
this.$bus.$on('foo', handle)
// child2
this.$bus.$emit('foo')

vuex:创建唯一的全局数据管理者store,通过它管理数据并通知组件状态变更

2.插槽

注意点:vue 2.6.0之后采用全新v-slot语法取代之前的slot、slot-scope

匿名插槽

// comp1
<div>
    <slot></slot>
</div>
// parent
<comp>hello</comp>

具名插槽

// comp2
<div>
    <slot></slot>
    <slot name="content"></slot>
</div>
// parent
<Comp2>
    <!-- 默认插槽用default做参数 -->
    <template v-slot:default>具名插槽</template>
    <!-- 具名插槽用插槽名做参数 -->
    <template v-slot:content>内容...</template>
</Comp2>

作用域插槽

// comp3
<div>
    <slot :foo="foo"></slot>
</div>
// parent
<Comp3>
    <!-- 把v-slot的值指定为作用域上下文对象 -->
    <template v-slot:default="ctx">
        来自子组件数据:{{ctx.foo}}
    </template>
</Comp3>

 

  • 1
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值