vue——组件通信

父子组件通信

组件：

<el-tabs v-model="active" @click="openLogin">
      <el-tab-pane v-for="key in tabsList" :key="key.name"></el-tab-pane>
</el-tabs>

export default{
    name: 'Tabs',
    props:{// 父传子
        tabsList: {
            type: Array,
            require: true
        }
    },
	methods:{
      openLogin() {// 子传父
        let flag = true;
        this.$emit('Login', flag)
      }
    }
}

引用组件的 .vue

<Tabs :tabsList="tabsList" @Login="Login"></Tabs>

    export default {
        name: 'Father',
        components: {
            Tabs: () => import("@/common/Tabs"),
        },
        data() {
            return {
                tabsList: [{label: '用户管理', name: 'user'}, {label: '配置管理', name: 'config'}],
                login: false
            }
        },
        methods: {
            Login(val) {
                this.login = val;
                console.log(val);// true
            }
        },
}

组件通信所有方法

• props
  1. 通过一般属性实现父向子通信
  2. 通过函数属性实现子向父通信
  3. 缺点：隔代组件通信麻烦
• vue 自定义事件（$emit 和 @，仅适用于子传父）

// 子组件
<button @click="sent">click</button>
methods: {
	sent(){
		this.$emit("info", "hello")
	}
}
// 父组件
<fun  @info="info"></fun>
methods: {
	info(str){
		alert(str)
	}
}

• vue 自定义事件（$parent.$emit 和 $on，仅适用于子传父）

// 子组件
<button @click="sent">click</button>
methods: {
	sent(){
		this.$parent.$emit("info", "hello")
	}
}
// 父组件
mounted(){
	this.$on("info", (str) => { alert(str) })
}

• vue 公共方法（适用于任意关系组件间传值）

// commonFun.js
export default {
    install(Vue) {
        Vue.prototype.$bus = new Vue({
            data: {
                a: 10
            },
            methods: {
                add() { this.a++ }
            }
        })
    }
}
// main.js
import commonFun from './commonFuc.js'
Vue.use(commonFun)
// 在随意组件内部调用
this.$bus.add()

• 消息订阅与发布（需要引入消息订阅与发布的实现库，如：pubsub.js）
  1. 订阅消息：PubSub.subscribe('msg', (msg, data) => {})
  2. 发布消息：PubSub.publish('msg', data)
  3. 优点：可以实现任意关系组件间通信
• vuex
• slot