vue组件间通信

组件间通信（父子，兄弟）

相关链接组件通信http://www.cnblogs.com/xulei1992/p/6121974.html

学习链接Vue.js——60分钟快速入门http://www.cnblogs.com/keepfool/p/5619070.html

http://www.cnblogs.com/keepfool/p/5637834.html

父组件传子组件

父传子方法（一） 属性传递 props

//子组件
<template> 
    <ul>
        <li v-for="item in dataList">{{item}}</li>
    </ul> 
</template>

<script>
    export default { 
        props : { dataList : [] }
    }
</script>

//父组件
<template>
    <component-child v-bind:data-list="dataList"> </component-child> 
    <input v-model="dataInput" v-on:keyup.13="addDataItem()" ></input>
</template>

<script>

import ComponentChild from './child.vue'
export default { 
    data () { 
        return { 
            dataInput: "", 
            dataList : [ 'hello world!','welcome to use vue.js' ] 
        } 
    }, 
    components : { ComponentChild }, 
    methods : { 
        addDataItem () { 
            let self = this 
            if( !(self.dataInput && self.dataInput.length > 0) ) { return } 
            self.dataList.push( self.dataInput ) 
            self.dataInput = "" 
        } 
    }
}
</script>

父传子方法（二） 广播事件传递 vm.$broadcast

//子组件
<template> 
    <ul> 
        <li v-for="item in dataList">{{item}}</li> 
    </ul> 
</template>

<script>
export default { 
    data () { 
        return { 
            dataList : [ 'hello world!', 'welcome to use vue.js' ] 
        } 
    }, 
    events : { 
        addChildDataEvent : function ( dataInput ) { 
            this.dataList.push( dataInput ) 
        } 
    }
}
</script>

//父组件
<template> 
    <component-child></component-child> 
    <input v-model="dataInput" v-on:keyup.13="addDataItem()" ></input>
</template>

<script>
    import ComponentChild from './child.vue'
    export default { 
        data () { 
            return { dataInput: "" } 
        }, 
        components : { ComponentChild }, 
        methods : { 
            addDataItem () { 
                let self = this 
                if( !(self.dataInput && self.dataInput.length > 0) ) { return } 
                //广播到子组件 
                self.$broadcast( 'addChildDataEvent', self.dataInput ) 
                self.dataInput = "" } 
            }
        }
</script>

子组件传父组件

子传父方法 派遣事件传递 vm.$dispatch

//子组件
<template> 
    <input v-model="dataInput" v-on:keyup.13="addDataItem()" ></input>
</template>

<script>
    export default { 
        data () { 
            return { 
                dataInput: "" 
            } 
        }, 
        methods : { 
            addDataItem () { 
                let self = this
                if( !(self.dataInput && self.dataInput.length > 0) ) { return }
                //派遣事件到父组件 
                self.$dispatch( 'addFatherDataEvent', self.dataInput )
                self.dataInput = "" 
            } 
        }
    }
</script>

//父组件
<template> 
    <ul> 
        <li v-for="item in dataList">{{item}}</li> 
    </ul> 
    <component-child></component-child>
</template>

<script>
import ComponentChild from './child.vue'
export default { 
    data () { 
        return { 
            dataList : [ 'hello world!', 'welcome to use vue.js' ] 
        } 
    },
    components : { ComponentChild }, 
    events : { 
        addFatherDataEvent : function ( dataInput ) { 
            this.dataList.push( dataInput ) 
        } 
    }
}
</script>

兄弟组件互传

父组件代理传递 子(vm.dispatch ）父 ( vm.broadcast )子 事件方法传递

<template> 
    <ul> 
        <li v-for="item in dataList">{{item}}</li> 
    </ul> 
</template>

<script> 
export default { 
    data () { 
        return { 
            dataList : [ 'hello world!', 'welcome to use vue.js' ] 
        } 
    },
    events : { 
        addChildDataEvent : function ( dataInput ) { 
        this.dataList.push( dataInput ) 
        } 
    }
}
</script>

<template>
    <input v-model="dataInput" v-on:keyup.13="addDataItem()" ></input>
</template>

<script>
export default { 
    data () { 
        return { dataInput: "" } 
    }, 
    methods : { 
        addDataItem () { 
            let self = this 
            if( !(self.dataInput && self.dataInput.length > 0) ) { return } //派遣事件到父组件 
            self.$dispatch( 'agentDataEvent', self.dataInput ) 
            self.dataInput = "" 
        }
    }
}
</script>

<template> 
<component-child1></component-child1>
<component-child2></component-child2>
</template>

<script>
import ComponentChild1 from './child1.vue'
import ComponentChild2 from './child2.vue'

export default { 
    components : { ComponentChild1, ComponentChild2 }, 
    events : { 
        agentDataEvent : function( dataInput ) { 
            this.$broadcast('addChildDataEvent', dataInput) 
        } 
    }
}
</script>

实例间通信

把实例当做参数传入另一个实例

<template>
    <div> 
        <p>实例间通信</p> 
        <ul>
            <li v-for="item in dataList">{{item}}</li>
        </ul> 
    </div>
</template>
<script> 
export default { 
    data () { 
        return { 
            dataList : [ 'hello world!', 'welcome to use vue.js' ] 
        } 
    }, 
    events : { 
        addDataEvent : function ( dataInput ) { 
            this.dataList.push( dataInput ) 
        } 
    }
}
</script>

<template>
<input v-model="dataInput" v-on:keyup.13="addDataItem()" ></input>
</template>

<script>
export default { 
    data () { 
        return { 
            dataInput: "", 
            otherApp : {} 
        } 
    }, 
    methods : { 
        addDataItem ( ) { 
            let self = this 
            if( !(self.dataInput && self.dataInput.length > 0) ) { return } //触发其他实例事件 
            self.otherApp.$emit( 'addDataEvent', self.dataInput ) 
            self.dataInput = "" 
        }, 
        setOtherApp ( app ) { 
            this.otherApp = app 
        }
    }
    
}
</script>

import Vue from "vue"
import App1 from "./communication5/app1.vue"
import App2 from "./communication5/app2.vue"

let AppVM1 = new Vue( App1 ).$mount('#app')
let AppVM2 = new Vue( App2 ).$mount('#app2')

AppVM2.setOtherApp( AppVM1 )