一些关于学习的总结

多总结，多思考，温故而知新~

一、图片不显示问题

<img :src="logo" class="sidebar-logo">

data() { 
    return { 
        title: 'Vue Admin Template', 
        logo: 'https://wpimg.wallstcn.com/69a1c46c-eb1c-4b46-8bd4-e9e686ef5251.png' 
    }
}

上面的代码使用v-bind绑定了src这属性，里面放入的是data里面的logo链接，此刻图片显示没问题，此刻我有个需求：希望换一个本地的图片，且这个图片，这个图片的路径是：@/assets/common/logo.png，于是上面的data里面的代码可改为：

data() { 
    return { 
        title: 'Vue Admin Template', 
        logo: '@/assets/common/logo.png' 
    }
}

但是，这样出不来效果。本地的地址你需要用require对其进行解析才会生效。

data() { 
    return { 
        title: 'Vue Admin Template', 
        logo: require('@/assets/common/logo.png') 
    }
}

这样就可以了。

二、一个关于sync的简单的写法

为了代码的简洁性，我们常常对代码进行封装，目前有个需求是：父组件点击一个按钮需要有个弹窗出现，我们将弹窗放在了一个自组件AddDept里面。

    1、首先在子组件里面定义一个控制弹窗显示的变量 showDialog: false
        data(){
            return {
                showDialog: false
            }
        }
    2、在触发点击事件的时候，我们将showDialog的值改为true
    methods: {
        handlerClick(){
            this.showDialog = true
        }
    }
    3、将这个变量通过父传子的方法给子组件：
    <AddDept :showDialog="showDialog"></AddDept>
    
    4、子组件通过props继续接收
    data(){
        showDialog: {
            type: Boolean,
            default: false
        }
    }
    <template>
        <el-dialog
            title="提示信息"
            @close="close"    //close是elementUI提供的一个方法：点击关闭
        >   
        </el-dialog>
    </template>
    
    5、在子组件里面触发点击事件将showDialog设为false，实现点击关闭功能，但是需要将这个值传递给父组件执行
    methods: {
        close(){
            this.$emit('update:showDialog', false)
        }
    }
    
    6、父组件进行接收（此处代码有简化）
    <AddDept :showDialog="showDialog" @update:showDialog="showDialog = $event"></AddDept>
    这个写法可以简写为：
    <AddDept :showDialog.sync="showDialog"></AddDept>

以上就是我记录的两个总结，第二个总结中的第六步是重点，本人能力有限，若是有不足还望各位大佬指出。