美文网首页vue专题
vue组件常用传值方法

vue组件常用传值方法

作者: 奇点先生 | 来源:发表于2019-11-24 23:29 被阅读0次

    1.父组件通信子组件

    ①属性props

    //child

    props:{msg:string}

    //parent

    <Helloword msg="测试信息"/>

    ②引用refs

    //parent

    <Helloword ref="hw"/>

    this.$refs.hw.xx="messge"

    ③子组件children

    this.$children[0].xx="message"

    2.子组件通信父组件

    //child

    this.$emit("add",good)

    //parent

    <Cart @add="handAdd($event)"/>

    3.兄弟组件之间的通信

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

    //兄弟1

    this.$parent.$on("handleon",handle)

    //兄弟2

    this.$parent.$emit("handleon")

    4.祖先和后代之间通信

    provide/inject

    provide(){

    return {foo:"foo"}

    }

    inject:["foo"] 

    5.任意2个组件之间,$bus或vuex

    以上就是所有的组件通信的方法,希望能帮助你。

    相关文章

      网友评论

        本文标题:vue组件常用传值方法

        本文链接:https://www.haomeiwen.com/subject/ypirwctx.html