Vue ElementUI如何使用组件,组件的使用方法实例

2021-07-25   阅读:1103   分类:前端    标签: Vue

开发项目过程中,涉及重复的代码,比如模态窗,我们可以封装起来,然后采用组件的形式,引入即可,这样也方便维护。

以下我们来封装Dialog 对话框组件

image.png

1、 创建Dialog组件

我们在项目目录下创建\src\components\Dialog.vue

<template>
<el-dialog title="提示" :visible.sync="DialogVisible" width="30%" @close="DialogClosed" >
  <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,
    }
  },
  created () {
   
  },
  methods: {
    show (){
        this.DialogVisible = true
},
//传值
DialogClosed(){
    this.$emit('tran','6661222')
}
  }
}
</script>

2、 使用组件:父级页面HTML代码

<template>
<el-button type="text" @click="show">点击打开 Dialog</el-button>
<!-- 使用组件 -->
       <Dialog ref="Dialog" @tran="getUser"></Dialog>
<!-- 使用组件 -->
</template>

3、 使用组件:父级页面js代码引入组件

<script>
import Dialog from "@/components/ Dialog.vue"
export default {
  data () {
 
  },
  components:{
    UploadPhotos
  },
  methods: {
// 点击打开 Dialog
    show(){
      this.$refs. Dialog.show();
    },
//父级页面获取值
getUser(e){
       console.log(e)
}     
 
  }
 
}
</script>


【腾讯云】爆款云服务器限时体验20元起,更多上云必备产品低至1元

‘简忆博客’微信公众号 扫码关注‘简忆博客’微信公众号,获取最新文章动态
转载:请说明文章出处“来源简忆博客”。http://www.tpxhm.com/fdetail/747.html

×
觉得文章有用就打赏一下文章作者
微信扫一扫打赏 微信扫一扫打赏
支付宝扫一扫打赏 支付宝扫一扫打赏

文章评论(0)

登录
简忆博客壁纸 头像

简忆博客
勤于学习,乐于分享。

置顶推荐

打赏本站

如果你觉得本站很棒,可以通过扫码支付打赏哦!
微信扫码:你说多少就多少~
微信扫码
支付宝扫码:你说多少就多少~
支付宝扫码
×