Vue自定义组件

简单组件展示

组件和页面类似

<template>
    <div>
        <p>这是一个自定义测试组件哟哟哟！动起来！！！</p>
    </div>
</template>

<script>
    export default {
        name:"testcompoent",
        data(){
            return{
                showAlert:false,
            }
        },
        props:{
            "title":"标题"
        },
        methods:{
            
        }
    }
</script>

<style>
</style>

局部注册

vue页面注册局部组件

import testcompoent from "@/components/testcompoent/testcompoent"

引入局部组件

export default {
    components:{
        testcompoent
    },
}

调用

<div id="components-demo">
            <testcompoent ></testcompoent>
            <button-counter title="哈斯吗"></button-counter>
            <button-counter title="辣鸡的皮泵"></button-counter>
        </div>

展示

11571C585F28410B60C9A85639673DD1.jpg

组件间的数据和事件传递

一个自定义卡片组件,其中$emit可将事件向外部传递，使用方式和基础控件类似，model是外部传递进来的数据

<template>
    <div>
        <!-- 相当于自定义cell -->
        <el-card :body-style="{ padding: '0px' }">
            <img
                preview="0"
                v-bind:preview-text="model.title"
                v-bind:src="model.url"
                class="image"
            />
            <div class="bottomButton">
                <!-- 一种方式是直接使用 $emit 传递回调函数 -->
                <el-button type="danger" circle v-on:click="$emit('deleteBlock')">
                    <i class="fa fa-trash-o fa-lg"></i>
                </el-button>
                <el-button type="primary" circle @click="doneAction()">
                    <i class="fa fa-pencil"></i>
                </el-button>
            </div>
            <div style="padding-left: 15px;padding-right: 15px;position: relative;top: -10px;">
                <p class="cellTitle">{{ model.title }}</p>
                <div v-if="type==0">
                    <p>来源：{{ model.webTitle }}</p>
                    <p>分类：{{ model.classification }}</p>
                    <p>观看数量：{{ model.see }}</p>
                </div>
                
            </div>
        </el-card>
    </div>
</template>

<script>
export default {
    // 自定义昵称
    name: 'acgpiccard',

    data() {
        return {
        };
    },
    // 自己的属性
    props: {
        // model，值为object
        model: Object,
        type:{
            type:Number,//0，壁纸数据，1分类数据
            default:0
        }
    },
    // 内部方法
    methods: {
        doneAction: function() {
            console.log('点击确定');
            //将事件传到外部，写在事件响应里面
            this.$emit('doneBlock');
        },
        deleteAction: function() {
            console.log('删除操作');
        }
    }
};
</script>

<style>
.image {
    object-fit: cover;
    width: 100%;
    height: 220px;
    display: block;
}

.bottomButton {
    position: relative;
    /* left: -30px; */
    right: 15px;
    top: -20px;
    flex-direction: row-reverse;
    /* margin-top: 10px; */
    display: flex;
    height: 40px;
}
.bottomButton .el-button {
    margin-left: 10px;
    border-radius: 50%;
    /* width: 44px; */
    height: 44px;
}

.cellTitle {
    font-weight: bold;
    font-size: 20px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
</style>

使用

<div>
            <el-row>
                <el-col
                    :span="7"
                    v-for="(model, index) in datArray"
                    :key="index"
                    :offset="1"
                    style="margin-bottom:40px"
                >
                    <!-- 使用自定义card组件(就和iOS中自定义视图一样) -->
                    <acgPicCard
                        v-bind:model="model"
                        @deleteBlock="showAlertAction(index)"
                        @doneBlock="doneAction(index)"
                    ></acgPicCard>
                    
                </el-col>
            </el-row>
        </div>

效果

F50306353549BB567FD4DE1D419FFE93.jpg