工作总结,vue兄弟组件间的传值通信,自测有效

145 阅读1分钟

创建store.js文件

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

父级vue文件

<template>
  <A/>
  <B/> 
</template>
 
<script>
import A from './a'
import B from './b'
export default {
    components: {A, B}
}
</script>

子组件a

<template>
    <div @click='change'>子组件a</div>
</template>
 
<script>
import Store from './store'
 
export default {
    name: 'a',
    methods: {
        change() {
            Store.$emit('changeAAAA', '来自子组件1的传值')
        }
    }
}
</script>

子组件b

<template>
    子组件b
  <div>{{name}}</div>
</template>
 
<script>
import Store from './store'
export default {
    name: 'b', 
    data() {
        return {
            this.name: null
        }
    },
  created(){
      Store.$on('changeAAAA', (data) => {
          this.name = data
      })
  }
}
</script>

利用中间文件来传值