vue 组件通信

1.父组件传子组件（props）
父组件v-bind（简写":"）绑定 子组件通过props

// 父组件
<template>
    <div>
        <Aside :id="father_id" ></Aside>
    </div>
</template>
<script>
    import Aside from './Aside/Aside.vue'
    export default {
        name:'Main',
        data(){
            return {
          		father_id: '123'
        	}
        },
        components:{
            Aside
        }
    }
</script>

//子组件
<template>
    <div class="left">
        我是Aside 数据：{{id}}
    </div>
</template>
<script>
    export default {
        name:'Aside',
        props: [
            'id'
        ]
    }
</script>

2.子组件传父组件（$emit）子组件使用$emit触法 父组件v-on（简写"@"）监听事件

// 父组件
<template>
    <div>
        <Aside @msg="message"></Aside>
    </div>
</template>
<script>
    import Aside from './Aside/Aside.vue'
    export default {
        name:'Main',
        },
        methods: {
            message(e){
                console.log(e);
            }
        },
        components:{
            Aside
        }
    }
</script>

// 子组件
<script>
    export default {
        name:'Aside',
        data(){
            return{
                msg: '我是msg'
            }
        },
        created() {
            this.$emit('msg',this.msg)
        }
    }
</script>

3.兄弟组件传值 （$on与$emit）
这个方法需要使用建立一个’桥‘

// connect.js  '桥'
import Vue from 'vue'
var connect = new Vue()
export default connect

// Footer 组件 emit触法
<template>
    <div>
        我是Footer
        <button @click="send">传值</button>
    </div>
</template>
<script>
    import Connect from './connect.js'
    export default {
        name: 'Footer',
        data(){
          return{
              FooterMsg:'FooterMsg'
          }
        },
        methods: {
            send(){
                Connect.$emit('FooterMsg',this.FooterMsg)
            }
        },
    }
</script>
// Main 兄弟组件 on提前监听
<template>
    <div>
        我是Main
        footerMsg:{{FooterMsg||'空'}}
    </div>
</template>

<script>
    import Connect from './connect.js'
    export default {
        name:'Main',
        data(){
            return {
                FooterMsg:''
        }
        },
        mounted() {
            Connect.$on('FooterMsg',(e)=>{
                    console.log(e)
                    this.FooterMsg = e
                })
        }
    }
</script>

4.vuex
vuex状态管理机制是响应式的，Vue 组件从 store 中读取状态的时候，若 store 中的状态发生变化，那么相应的组件也会相应地得到高效更新。vuex刷新后会初始化。

store // 仓库
state // 状态
getter // 获取state，可以过滤选择需要的state数据
mutation // 同步修改state 通过dispatch
action // 异步修改state 通过commit触法

第一步 声明store

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

Vue.use(Vuex);
let store = new Vuex.Store({
    state:{
        count:"10"
    },
    getters:{
        // 参数列表state指的是state数据
        getCount(state){
            return state.count;
        }
    },
    actions:{// commit触法
        setCount({commit}, count){
            // 调用mutaions里面的方法
            commit("setCount", count);
        }
    },
    mutations:{ //dispatch触法
        setCount(state, count){
            state.count = count;//将传参设置给state的count
        }
    }
})
export default store

第二步导入

import Vue from 'vue'
import App from './App.vue'
import store from './components/store/store.js'

Vue.config.productionTip = false

new Vue({
  render: h => h(App),
    store
}).$mount('#app')

第三步使用

<template>
    <div>
        我是Main
        <button @click="Click1">获取count</button>
        <button @click="Click2">更改count为11</button>
        <button @click="Click3">更改count为110</button>
    </div>
</template>

<script>
    export default {
        name:'Main',
        methods: {
            Click1(){
                console.log(this.$store.getters.getCount)
            },
            Click2(){
                this.$store.dispatch('setCount','11');
            },
            Click3(){
                this.$store.commit('setCount','110');
            },
        },
    }
</script>