vue自定义组件使用经验分享

在前端使用vue开发的过程中经常会使用到的技能，记录并分享出来

一、定义组件vue

自定义对话框组件 article-dialog.vue

<template>
      <el-dialog class="dialog" :title="title" append-to-body :visible="visible" @close="$emit('update:visible',false)" width="60%">
        <h2>{{dialogData.title}}</h2>
        <div class="dialogDate" > {{ dialogData.createTime }} </div>
        <div class="dialogImg">
          <img class="dialogCover" :src="dialogData.cover"/>
        </div> 
        
        <div style="margin-top: 10px;" v-html="dialogData.content">  </div>
        <span slot="footer" class="dialog-footer">
        </span>
      </el-dialog>
</template>
<script>
export default {
    // 自定义组件的属性
    props: {
        visible: Boolean,
        title:String
    },
  data() {
    return {
      // title:"提示框",  
      dialogVisible: false,
      dialogData:{},
    };
  },
}
</script>
<style lang="scss">
.dialog{
    h2{
     text-align: center;
      font-weight: bold;
      margin: 10px;
      color: #1c1c1c;
    }
    .dialogDate{
      text-align: center;
    }
    .dialogImg {
      display: flex;
      justify-content: center;

      .dialogCover {
        width: 40%;
        margin-top: 20px;
        margin-bottom: 20px;
      }
    }
}
</style>

二、使用组件

简易的使用 一般有如下步骤：引入、注册组件、描述标签、传递参数

<!-- 版本说明页面 -->
<template>
  <basic-container>
    <div class="api-title" >版本说明</div>
    <div class="panel"  v-loading="loading">
      <div v-for="(item, index) in fromData" :key="item" class="recommend-item-box" @click="itemClick(item)">
      <div class="content-box">
        <div class="content-blog">
          <div class="title-box">
            <div class="ellipsis-online" style="align-items: center;font-size: 16px;line-height: 24px;">{{ item.title }}
            </div>
          </div>
          <div class="info-box">
            <div class="info"><span>{{ item.createTime }}</span></div>
          </div>
        </div>
      </div>
    </div>

    </div>
      <!-- 第三步：描述标签提供属性 -->
      <detail-dialog ref="visDialog" title="版本说明" :visible.sync="visible"></detail-dialog>
  </basic-container>
</template>
    
<script>

//第一步：引入
import detailDialog from "@/components/yyge/article-dialog";

export default {
  components:{
    //第二步：注册  
    detailDialog
  },
  data() {
    return {
      fromData:[],
      visible: false
    };
  },
  methods: {
    itemClick(row) {
       //第四步：传递参数 
       //传递自定义组件内的 dialogData 对象
       this.$refs.visDialog.dialogData=row
       //设置自定义组件内的  dialogVisible 为true
       this.$refs.visDialog.dialogVisible=true
    },

  },
};
</script>
    
<style lang="scss" scoped>...</style>