父子组件通信
组件:
<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);
}
},
}
组件通信所有方法
- props
- 通过一般属性实现父向子通信
- 通过函数属性实现子向父通信
- 缺点:隔代组件通信麻烦
- 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) })
}
export default {
install(Vue) {
Vue.prototype.$bus = new Vue({
data: {
a: 10
},
methods: {
add() { this.a++ }
}
})
}
}
import commonFun from './commonFuc.js'
Vue.use(commonFun)
this.$bus.add()
- 消息订阅与发布(需要引入消息订阅与发布的实现库,如:
pubsub.js
)
- 订阅消息:
PubSub.subscribe('msg', (msg, data) => {})
- 发布消息:
PubSub.publish('msg', data)
- 优点:可以实现任意关系组件间通信
- vuex
- slot