2020-vue：vue组件间通信

1.父子组件通信

1) 父子组件通过props传递参数

父组件

<template>
    <div>
        <h1>下面是子组件</h1>
        <!-- 父组件通过标签上面定义传值 -->
        <son :data="data" style="height: 200px;"></son>
    </div>
</template>

<script>
// 引入子组件
import son from "./son.vue"

export default {
  name: 'parent',
  components: {
    son // 初始化组件
  },
  data () {
    return {
        data: '给子组件的消息'
    }
  },
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
</style>

子组件

<template>
    <!-- 子组件通过props方法接受数据 -->
    <div style="height: 200px;">
        {{data}}
    </div>
</template>
<script>
export default {
    name: 'son',
    props: ['data'], // 接受父组件传值
    data() {
        return {
        }
    },
}
</script>

另，props可以有以下3种写法

props: ['data']

props: {
    data: String //这里指定了字符串类型，如果类型不一致会警告
}

props: {
    data: {
        type: String,
        default: '默认值' 
    }
}

2.子父组件通信

1) 子父组件通过$emit方法传递参数

父组件

<template>
    <div>
        <h1>收到子组件信息:{{message}}</h1>
        <h1>下面是子组件</h1>
        <!-- 自定义一个事件receive，并绑定函数receive -->
        <son @receive="receive"></son>
    </div>
</template>

<script>
// 引入子组件
import son from "./son.vue"

export default {
  name: 'parent',
  components: {
    son // 初始化组件
  },
  data () {
    return {
        message: '',
    }
  },

  methods: {
    // 在receive函数中接收子组件参数
    receive(msg){
        this.message = msg
    }
  },
}
</script>

子组件

<template lang="">
    <div>
        <button @click="send">发送</button>
    </div>
</template>

<script>

export default {
    name: 'son',
    data() {
        return {
            
        }
    },
    methods: {
        send(){
            // 触发receive事件，向父组件传递参数
            this.$emit('receive', 'hello world')
        }
    },
}
</script>
<style lang="">
</style>

2) 子父组件通过引用类型传参

父组件

<template>
    <div>
        <h1>{{data.message}}</h1>
        <h1>下面是子组件</h1>
        <!-- 父组件通过标签上面定义传值 -->
        <son :data="data" style="height: 200px;"></son>
    </div>
</template>

<script>
// 引入子组件
import son from "./son.vue"

export default {
  name: 'parent',
  components: {
    son // 初始化组件
  },
  data () {
    return {
        data: {
            message: '父 => 子'
        }
    }
  },
}
</script>

子组件

<template>
    <!-- 子组件通过props方法接受数据 -->
    <div style="height: 200px;">
        <div>
            {{data.message}}
        </div>

        <button @click="onclickButton">修改父组件的值</button>
    </div>
</template>
<script>
export default {
    name: 'son',
    props: ['data'], // 接受父组件传值
    data() {
        return {
        }
    },
    methods: {
        onclickButton(){
            this.data.message = '子 => 父'
        }
    },
}
</script>

3.兄弟组件间通信

1) 通过父组件作为中间件来通讯

父组件

<template>
    <div>
        <h2>下面是子组件1</h2>
        <child1 @receive="receive"></child1>
        <hr>
        <h2>下面是子组件2</h2>
        <child2 :message="message"></child2>
    </div>
</template>

<script>
// 引入子组件
import child1 from "./child1.vue"
import child2 from "./child2.vue"

export default {
  name: 'parent',
  components: {
    child1, // 初始化组件
    child2,
  },
  data () {
    return {
        message: '初始值'
    }
  },

  methods: {
    receive(message){
        this.message = message
    }
  },
}
</script>

子组件1

<template lang="">
    <div>
        <button @click="send">发送信息</button>
    </div>
</template>
<script>
export default {
    name: 'child1',
    data() {
        return {
        }
    },
    methods: {
        send(){
            this.$emit('receive', '来自组件1的消息')
        },
    },
}
</script>

子组件2

<template lang="">
    <div>
        <h3>{{message}}</h3>
    </div>
</template>
<script>
export default {
    name: 'child2',
    props: {
        message: {
            type: String,
            default: ''
        },
    },
    data() {
        return {
        }
    },
}
</script>

2)通过EventBus进行兄弟间组件通讯

main.js

首先在main.js文件中定义一个新的Bus对象并且挂载在原型链上，其实他是一个全新的Vue实例：

// The Vue build version to load with the `import` command
// (runtime-only or standalone) has been set in webpack.base.conf with an alias.
import Vue from 'vue'
import App from './App'
import router from './router'

Vue.config.productionTip = false

// main.js
// 事件总线
Vue.prototype.$bus = new Vue()  // 定义一个新的Bus对象并且挂载在原型链上

/* eslint-disable no-new */
new Vue({
  el: '#app',
  router,
  components: { App },
  template: '<App/>'
})

子组件1

<template lang="">
    <div>
        <button @click="send">发送信息</button>
    </div>
</template>
<script>
export default {
    name: 'child1',
    methods: {
        send(){
            this.$bus.$emit('receive', '来自组件1的消息')
        },
    },
}
</script>

子组件2

<template lang="">
    <div>
        <h3>{{message}}</h3>
    </div>
</template>
<script>
export default {
    name: 'child2',
    data() {
        return {
            message: ''
        }
    },
    created() {
        this.$bus.$on('receive', message =>{
            this.message = message
        })
    },
}
</script>

父组件

<template>
    <div>
        <h2>下面是子组件1</h2>
        <child1></child1>
        <hr>
        <h2>下面是子组件2</h2>
        <child2></child2>
    </div>
</template>

<script>
// 引入子组件
import child1 from "./child1.vue"
import child2 from "./child2.vue"

export default {
  name: 'parent',
  components: {
    child1, // 初始化组件
    child2,
  },
}
</script>

3) 或者直接使用vuex进行通讯(推荐做法)

详见21.vuex