elment-plus 封装组件的的妙用

1v-bind="$attars" 的作用

父组件
 <div style="width: 200px;">
        <m-menu :data="data1" backgroun-color='#333'></m-menu>
    </div>

子组件
  <el-menu :default-active="defaultActive" class="el-menu-vertical-demo" :router="router" v-bind="$attrs">
        <template v-for="(item, index) in data" :key="index">
            <el-sub-menu :index="item.index" v-if="item.children && item.children.length > 0">
                <template #title>
                    <el-icon>
                        <component :is="item.icon"></component>
                    </el-icon>
                    <span>{{ item.name }}</span>
                </template>
                <el-menu-item :index="item1.index" v-for="(item1, index1) in item.children" :key="index1">
                    <el-icon>
                        <component :is="item1.icon"></component>
                    </el-icon>
                    <span>{{ item1.name }}</span>
                </el-menu-item>
            </el-sub-menu>
            <el-menu-item :index="item.index" v-else>
                <el-icon>
                    <component :is="item.icon"></component>
                </el-icon>
                <span>{{ item.name }}</span>
            </el-menu-item>
        </template>

    </el-menu>


element-plus 中的属性 直接就可以在父元素中直接传递而不用再进行声明

2v-bind="$attars" 多个组件的使用 

父组件

<template>
    <m-chooseTime @getStratTime="getStratTime" @getallTime="getallTime" :startOptios="startOptios"></m-chooseTime>
</template>
const startOptios = {
    size: 'small'
}

子组件
  <el-time-select v-model="startTime" :max-time="endTime" :placeholder="strtPlaceholder" :start="startSlectTime"
            :step="startSlectstep" :end="endSlectTime" v-bind="$attrs.startOptios" />

3 不使用a链接也可以做到锚点链接的效果

 

  <div class="city-name">
        <div class="city-name-item" v-for="(value, key ) in citys.cities" :key="key" @click="clickChat(key)">
          {{ key }}</div>
      </div>
      <el-scrollbar max-height="300px">
        <el-row class="city-address" v-for="(value, key ) in citys.cities" :key="key" :id="key">
          <el-col :span="2">
            {{ key }} :
          </el-col>
          <el-col :span="22" class="city-address-item">
            <div @click="cityaddressitem(item)" class="right" v-for="(item, index ) in value" :key="index">{{ item.name }}
            </div>
          </el-col>
        </el-row>
      </el-scrollbar>


const clickChat = (item: string) => {
  let el = document.getElementById(item)
  if (el) {
    el.scrollIntoView()
  }

}