Vue组件模块的使用方法(以element-ui的弹框组件为例)

1.一开始不显示,以事件触发显示的组件模块
此处以双击显示弹框为例:
我这里随便用了element-ui的一个官网弹框代码

<template>
    <el-dialog
  title="提示"
  :visible.sync="dialogVisible"
  width="30%"
  :before-close="handleClose">
  <span>这是一段信息</span>
  <span slot="footer" class="dialog-footer">
    <el-button @click="dialogVisible = false">取 消</el-button>
    <el-button type="primary" @click="dialogVisible = false">确 定</el-button>
  </span>
</el-dialog>
</template>

<script>
  export default {
    data() {
      return {
        dialogVisible: false
      };
    },
    methods: {
      handleClose(done) {
        this.$confirm('确认关闭?')
          .then(_ => {
            done();
          })
          .catch(_ => {});
      }
    }
  };
</script>

1.1导入弹框组件的正确路径
在这里插入图片描述
代码如下:

import detailDialog from "./dialog/preview.vue";

注:1如果文件夹下只有一个index.vue文件系统会默认识别,可以不写完整,如下面第二个例子所示

2如果有多个文件,需要写清楚具体路径名称
1.2定义组件名称
代码如下:

components: {
    "detail-dialog": detailDialog,
  },

在代码中是这样一个结构
在这里插入图片描述
2.3把组件引入到html代码中(任意位置都可以,但是要在html代码中)
代码如下:

<detail-dialog ref="detailDialog"></detail-dialog>

设置el-table双击事件
在这里插入图片描述

@row-dblclick="handleDbClick"

方法代码如下:

 //双击行
    handleDbClick() {
      this.$refs.detailDialog.dialogVisible = true;
    },

双击表格行即可显示弹框!



2.导入使用直接显示(用于页面内容太多需要分开写模块)
2.1导入组件的正确路径
在这里插入图片描述

import Btns from "./btns";

注:文件夹下只有一个index.vue文件系统会默认识别,如果有多个文件,需要写清楚具体路径名称
2.2定义组件名
代码如下:

 components: {Btns,},

在代码中是这样一个结构
在这里插入图片描述
2.3引入到html代码中

<btns ref="btns"></btns>

把这个代码放到你希望这个组件出现的地方就行

©️2020 CSDN 皮肤主题: 数字20 设计师:CSDN官方博客 返回首页