组件间通信的6种方式

 父组件向子组件传值

父组件

<template>
    <div id="app">
        <mailTable :father="father"></mailTable>
    </div>
</template>

<script>
import mailTable from '../utils/table'

export default {
    components: {
        mailTable
    },
    data() {
        return {
            father: '我是父组件的值'
        }
    }
}
</script>

<style>
</style>

子组件

<template>
    <div>
        {{ father }}
    </div>
</template>

<script>
export default {
    data() {
    },
    props: ['father'],
    created() {}
}
</script>
<style>
.mailTable {
    margin: 0 auto;
}

.column {
    height: 54px;
    border: 1px solid #e8e8e8;
    text-align: center;
}
</style>

• 总结：父子组件间进行传值，子组件通过props接收父组件传过来的值

 子组件向父组件传值

父组件

<template>
    <div id="app">
        <mailTable @giveData="getSonData"></mailTable>
        <div>{{sonData}}</div>
    </div>
</template>

<script>
import mailTable from '../utils/table'

export default {
    components: {
        mailTable
    },
    data() {
        return {
            father: '我是父组件的值',
            sonData:""
        }
    },
    methods:{
        getSonData(data){
            console.log(data)
            this.sonData = data
        }
    }
}
</script>

<style>
</style>

子组件

<template>
    <div>
        <el-button @click="giveSonData">向父组件传值</el-button>
    </div>
</template>

<script>
export default {
    data() {
       return{
           son1:'我是子组件的值'
       }
    },

    created() {},
    methods:{
        giveSonData(){
            this.$emit('giveData',this.son1)
        }
    }
}
</script>
<style>
.mailTable {
    margin: 0 auto;
}

.column {
    height: 54px;
    border: 1px solid #e8e8e8;
    text-align: center;
}
</style>

 vuex组件之间传值

store.js

import Vue from 'vue'
import Vuex from 'vuex'

Vue.use(Vuex)

const store = new Vuex.Store({
    state: {
        count: 10
    },
    mutations: {
        increment(state,data) {
            console.log(data,'12+++')
            state.count += data
        }
    },
    actions: {
        addcrement(context,data) {
            context.commit('increment',data)
        }
    }
})
export default store

A组件

<template>
    <div id="app">
        <mailTable @giveData="getSonData"></mailTable>
        <div>{{ model }}</div>
        <el-button @click="add">增加</el-button>
    </div>
</template>

<script>
import mailTable from '../utils/table'

export default {
    components: {
        mailTable
    },
    data() {
        return {
            father: '我是父组件的值',
        }
    },
    computed: {
        model() {
            return this.$store.state.count
        }
    },
    methods: {
        getSonData(data) {
            console.log(data)
            this.sonData = data
        },
        add() {
            this.$store.dispatch('addcrement',10)
        }
    }
}
</script>

<style>
</style>

EventBus

main.js

Vue.prototype.$eventBus = new Vue()

Eleck.Vue

  saveElec() {
            if (this.eleckDetail == '') {
                this.Toast('所填内容不可为空')

            } else {
                var APP_NO = this.$route.query.APP_NO
                this.$eventBus.$emit('updateName', {
                    IS_OTHER: '4',
                    OTHER_INFO: this.eleckDetail,
                    APP_NO: APP_NO,
                })
                this.$router.back()
            }

        }

OrderProcess.vue

  updateData() {
            var vm = this
            vm.$eventBus.$on('updateName', (e) => {
                vm.saveOrderInfo.IS_OTHER = e.IS_OTHER
                vm.saveOrderInfo.OTHER_INFO = e.OTHER_INFO
                vm.saveOrderInfo.imgArr = e.imgArr
                vm.saveOrderData('IS_OTHER', vm.saveOrderInfo.IS_OTHER)
                vm.saveOrderData('OTHER_INFO', vm.saveOrderInfo.OTHER_INFO)
                vm.saveOrderData('imgArr', vm.saveOrderInfo.imgArr)
            })
        },

$parent / $children与 ref

• $parent / $children：访问父 / 子实例
• ref：如果在普通的 DOM 元素上使用，引用指向的就是 DOM 元素；如果用在子组件上，引用就指向组件实例

  // component-a 子组件
  export default {
    data () {
      return {
        title: 'Vue.js'
      }
    },
    methods: {
      sayHello () {
        window.alert('Hello');
      }
    }
  }

  // 父组件
  <template>
    <component-a ref="comA"></component-a>
  </template>
  <script>
    export default {
      mounted () {
        const comA = this.$refs.comA;
        console.log(comA.title);  // Vue.js
        comA.sayHello();  // 弹窗
      }
    }
  </script>

   

 

localStorage缓存