前端vue 自定义组件

令狐少侠2011

已于 2024-07-18 10:49:24 修改

阅读量146

点赞数

文章标签： vue.js 前端

于 2023-10-07 11:49:18 首次发布

本文链接：https://blog.csdn.net/nalanxiaoxiao2011/article/details/133636106

版权

一、Vue组件的使用之props

为了提高组件的复用性，在封装vue组件时需要遵守如下原则：

① 组件的DOM结构、Style样式要尽量复用

② 组件中要显示的数据，尽量由组件的使用者提供

为了方便使用者为组件提供要展示的数据，vue组件提供了props的概念

什么是组件的props

Props是组件的自定义属性，组件的使用者可以通过props把数据传递到子组件的内部，供子组件内部进行使用。

在这里插入图片描述
Props的作用：父组件通过props向子组件传递要展示的数据

Props的好处：提高了组件的复用性

2.在组件中声明props

在封装vue组件时，可以把动态的数据项声明为props自定义属性。自定义属性可以在当前组件的模板结构中被直接使用。
在这里插入图片描述
3.无法使用未声明的props

如果父组件给子组件传递了未声明的props属性，则这些属性会被忽略，无法被子组件使用。

在这里插入图片描述
4.动态绑定props的值

可以使用v-bind属性绑定的形式，为组件动态绑定Props的值
在这里插入图片描述

5.Props的大小写命名

组件中如果使用“camelCase（驼峰命名法）”声明了props属性的名称，则有两种方式为其绑定属性值。
在这里插入图片描述

注意：prop 的定义应该尽量详细，至少需要指定其类型

细致的 prop 定义有两个好处：

它们写明了组件的 API，所以很容易看懂组件的用法；

在开发环境下，如果向一个组件提供格式不正确的 prop，Vue 将会告警，以帮助你捕获潜在的错误来源。
在这里插入图片描述

在这里插入图片描述

二、实例：封装开户银行选择组件，在不同的页面引用

在这里插入图片描述

点击选择银行，弹出银行选择对话框

在这里插入图片描述

定义组件:

<!-- 选择银行通用 -->
<template>
    <div class="collection-content">
        <!--    <el-tag-->
        <!--      color="#ffffff"-->
        <!--      style="font-size: 18px; padding: 0px 20px 10px 0px; border-color: #ffffff"-->
        <!--      >银行信息-->
        <!--    </el-tag>-->
        <!-- 选择银行弹窗 -->
        <el-dialog
                title="选择银行"
                :visible.sync="selectBankOpen"
                width="60%"
                append-to-body
        >
            <el-row type="flex" :gutter="24">
                <el-col :span="24">
                    <el-form
                            :model="queryBankInfoParams"
                            ref="queryBankInfoForm"
                            size="small"
                            :inline="true"
                            v-show="showBankSearch"
                            label-width="108px"
                    >
                        <el-form-item label="编码(银行行号)" prop="bankCode">
                            <el-input
                                    v-model="queryBankInfoParams.bankCode"
                                    placeholder="请输入编码(银行行号)"
                                    clearable
                                    @keyup.enter.native="handleBankInfoQuery"
                            />
                        </el-form-item>
                        <el-form-item label="银行名称" prop="bankName">
                            <el-input
                                    v-model="queryBankInfoParams.bankName"
                                    placeholder="请输入银行名称"
                                    clearable
                                    @keyup.enter.native="handleBankInfoQuery"
                            />
                        </el-form-item>
                        <el-form-item label="所属市县" prop="citiesCounties">
                            <el-input
                                    v-model="queryBankInfoParams.citiesCounties"
                                    placeholder="请输入市县"
                                    clearable
                                    @keyup.enter.native="handleBankInfoQuery"
                            />
                        </el-form-item>
                        <el-form-item>
                            <el-button
                                    type="primary"
                                    icon="el-icon-search"
                                    size="mini"
                                    @click="handleBankInfoQuery"
                            >搜索
                            </el-button
                            >
                            <el-button
                                    icon="el-icon-refresh"
                                    size="mini"
                                    @click="resetBankInfoQuery"
                            >重置
                            </el-button
                            >
                        </el-form-item>
                    </el-form>
                    <el-table
                            ref="singleTable"
                            :data="bankConfigList"
                            highlight-current-row
                            border
                            height="500"
                            @current-change="handleBankCurrentChange"
                    >
                        <el-table-column
                                label="编码(银行行号)"
                                align="center"
                                prop="bankCode"
                        />
                        <el-table-column
                                label="名称(银行行名)"
                                align="center"
                                prop="bankName"
                        />
                        <el-table-column label="省份" align="center" prop="province"/>
                        <el-table-column
                                label="市县"
                                align="center"
                                prop="citiesCounties"
                        />
                    </el-table>
                    <pagination
                            :total="bankTotal"
                            :page.sync="queryBankInfoParams.pageNum"
                            :limit.sync="queryBankInfoParams.pageSize"
                            @pagination="getBankInfoList"
                    />
                </el-col>
            </el-row>
            <div slot="footer" class="dialog-footer">
                <el-button type="primary" @click="handleSelectBankInfoComplete"
                >确 定
                </el-button
                >
                <el-button @click="selectBankOpen = false">取 消</el-button>
            </div>
        </el-dialog>
    </div>
</template>
<script>
import {listBankConfig} from "@/api/system/bankConfig";
import "@riophae/vue-treeselect/dist/vue-treeselect.css";

export default {
    name: "Bankchose",
    dicts: [],
    components: {},
    data() {
        return {
            // 收款信息明细分页
            collectionCurrentPage: 1, // 当前页码
            collectionPageSize: 10, // 每页显示数量
            //显示银行信息dialog开始
            selectBankOpen: false,
            showBankSearch: true,
            bankInfoLoading: true,
            // 银行信息表格数据
            bankConfigList: [],
            // 查询参数
            queryBankInfoParams: {
                pageNum: 1,
                pageSize: 10,
                bankName: undefined,
                province: undefined,
                citiesCounties: undefined,
            },
            // 总条数
            bankTotal: 0,
            //选中的值
            bankCurrentRow: null,
        };
    },
    created() {
    },
    //金额过滤器
    filters: {},
    computed: {},
    props: {},
    methods: {
        /**  选择银行 start */
        //选择银行
        showSelectBankDialog(obj) {
            console.log("------- 进入子组件[选择银行] start... ")
            this.bankCurrentRow = null;
            this.queryBankInfoParams.bankName = "";
            this.queryBankInfoParams.citiesCounties = "";
            this.selectBankOpen = true;
            this.handleBankInfoQuery();
        },
        /** 查询银行信息列表 */
        getBankInfoList() {
            this.bankInfoLoading = true;
            // 后台查询 
            listBankConfig(this.queryBankInfoParams).then((response) => {
                this.bankConfigList = response.rows;
                this.bankTotal = response.total;
                this.bankInfoLoading = false;
            });
        },
        /** 搜索按钮操作 */
        handleBankInfoQuery() {
            this.queryBankInfoParams.pageNum = 1;
            this.getBankInfoList();
        },
        /** 重置按钮操作 */
        resetBankInfoQuery() {
            this.resetForm("queryBankInfoForm");
            this.handleBankInfoQuery();
        },
        /** dialog确定按钮操作 */
        handleSelectBankInfoComplete() {
            if (!this.bankCurrentRow) {
                // 提示
                this.$message({
                    message: "请选择银行",
                    type: "error",
                });
                return ;
            }
            this.selectBankOpen = false;
            this.$emit('completeChose', this.bankCurrentRow);
        },
        /** 选择列操作 */
        handleBankCurrentChange(val) {
            this.bankCurrentRow = val;
        },
        /**  选择银行 edn*/
    },
};
</script>
<style lang="scss" scoped>
.collection-content {
  padding: 0 10px;
}

::v-deep .el-form-item--small .el-form-item__content {
  width: 300px;
}

.text-overflow-ellipsis {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
</style>

父组件中调用 :
1.
在这里插入图片描述
2.

三、vue 跨组件传参3种方式

this.$emit()，子组件向父组件传参

首先在子组件加上点击事件触发才能传参，

// 子组件
<template>
  <div class="title">
    <button @click="btn()">提交</button>
  </div>
</template>
 
<script>
export default {
  methods: {
    btn () {
    // 注意这里是事件名，不是事件方法名
      this.$emit('**recieveMsg**', 123)
    }
  }
}
</script>
// 父组件
<template>
  <div>
       // 子组件
    <Title @recieveMsg='get' />
    子组件传参{{title}}
  </div>
</template>
 
<script>
export default {
  data () {
    return {
      title: ''
    }
  },
  methods: {
    get (val) {
      this.title = val
    }
  }
}
</script>
————————————————

通过父组件给子组件传递函数类型的props实现：子给父传递数据

父组件：

<SchoolCm :getSchoolName="getSchoolName"></SchoolCm>

methods: {
     getSchoolName(name) {
        console.log('App收到了学校名：', name)
    }
}

子组件：
<button @click="sendSchoolName">把学校名给App</button>
 props: ['getSchoolName'],
methods: {
      sendSchoolName() {
        this.getSchoolName(this.name)
      }
}