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 )