Vue组件的传值问题

组件传值-父传子

父结构

<template>
    父组件
    <com-a :message="msg"></com-a>
</template>
<script>
    export default {
        data () {
            return {
                msg:'父组件数据'
            }
        }
    }
</script>

子结构

<template>
    子组件
    {{message}}
</template>
<script>
    export default {
        props:['message']   
    }
</script>

组件传值-子传父

<template>
  <div id="app">
    父组件
    <com-a @toParent="fn"></com-a>
  </div>
</template>
<script>
import comA from './components/com-a'
export default {
  components: {
    comA
  },
  methods: {
    fn (msg) {
      console.log(msg)
    }
  }
}
</script>

• 自定义事件给谁绑定的的，谁才能触发

<template>
  <div class="container">
    <p> 子组件A </p>
  </div>
</template>
​
<script>
export default {
  created () {
    this.$emit('toParent', this.msg)
  },
  data () {
    return {
      msg: 'chilren data'
    }
  }
}
</script>

 

09-组件传值-非父子

• 需要一个vue实例，在组件A和组件B引入，实例是一个公共的实例。

  • 事件给谁绑定，只能谁去调用

eventBus.js

import Vue from 'vue'
export default new Vue({})

com-b

// 绑定一个事件  接收数据
eventBus.$on('toB', (data) => {
    console.log(data)
})

com-a

// 触发自定义事件
eventBus.$emit('toB', 'A组件数据')

注意：先绑定事件，再触发事件。

 

eventBus：

俗：公共汽车，绑定事件和触发事件的公用vue实例。

专业：事件总线，在这个角色去控制所有的事件的绑定和触发。