组件之间通信方式

组件之间通信方式

i. 父子组件传值

props down, events up

 

属性验证

props:{name:Number}

Number,String,Boolean,Array,Object,Function,null(不限制类型)

 

ii. Ref

this.$refs.child

 

iii. 事件总线

var bus = new Vue()

*mounted生命周期中进行监听

iv 关系链(viewmodel链)

this.$parent.xxx

 

    <div id="app">
        <aaa></aaa>
    </div>
​
    <template id="aaa">
        <div>
            <p>这是A组件...</p>
            <input type="text" v-model="msg">
            <hr>
            <bbb :msg="msg"></bbb>  
        </div>
    </template>
    <template id="bbb">
        <div>
            <input type="text" v-model="ownMsg">
        </div>
    </template>
​
​
​
​
​
Vue.component("aaa",{
        template:"#aaa",
        data(){
            return {
                msg:"hello"
            }
        }
    })
    Vue.component("bbb",{
        template:"#bbb",
        props:["msg"],  //在props里面定义的数据，组件内部使用仍然通过this访问
        computed:{
            ownMsg:{
                get(){
                    return this.msg
                },
                set(val){
                    console.log(this)
                    //希望a组件的msg进行更改
                    this.$parent.msg = val
                }
            }
        }
    })
   
​
​
​
    var vm = new Vue({
        el:"#app"
    })