vue父子组件沟通两点实例

我记得vue中父子组件沟通三个知识点：

props, slot, event。

今天采集到两个实例，作个记录（紫对紫，红对红）：

父组件部分代码：

<kt-button icon="fa fa-plus" :label="$t('action.add')" perms="sys:user:add" type="primary" @click="handleAdd()"/>

子组件部分代码：

<template>
    <el-button :size="size" :type="type" :icon="icon"
        :loading="loading" :disabled="!hasPerms(perms)" @click="handleClick">
        {{label}}
    </el-button>
</template>

<script>
    import { hasPermission } from '@/permission/index'
    export default {
        name: 'KtButton',
        props: {
            label: {
                type: String,
                default: 'Button'
            },
            icon: {
                type: String,
                default: ''
            },
            size: {
                type: String,
                default: 'mini'
            },
            type: {
                type: String,
                default: null
            },
            loading: {
                type: Boolean,
                default: false
            },
            disabled: {
                type: Boolean,
                default: false
            }, 
            perms: {
                type: String,
                default: null
            }
        },
        data() {
            return {
                
            }
        },
        methods: {
            handleClick: function() {
                console.log("kt-button core....")
                this.$emit('click', {})
            },
            hasPerms: function(perms) {
                return hasPermission(perms) & !this.disabled
            }
        },
        mounted() {
            
        }
    }
</script>

<style>
</style>

标签：vue,false,String,default,perms,实例,组件,type
来源： https://www.cnblogs.com/aguncn/p/12266536.html