vue--开发记录200205.md

2020.05.15

vm.$attrs

在写vue时，传值写了:default,然后导致数据绑定失败，在打定的this中在$attrs中找到了default数据

查询官方文档说明：

attrs" 传入内部组件——在创建高级别的组件时非常有用。

default属于不被 prop 识别的属性,将 :default做修改:defaultDate

<PopupCalendar
  :is-show="showCalendar"
  @cancel="showCalendar = false"
  @confirm="onConfirmCalendar"
  //:default="initDate"
  :defaultDate:"initDate"
></PopupCalendar>

vue 通过sslot插槽将div直接传给组件

<slot name='report'></slot> <div slot="report" class="report-num-box"></div>

组件传值

 <ReportCell title="客户情况" to="/memberCenter">
  <div slot="report" class="report-num-box">
    <ReportNum des="客户总数" num="10"></ReportNum>
    <ReportNum des="今日新增客户" num="+1" status="add"></ReportNum>
    <ReportNum des="今日聊天次数" num="-1" status="less"></ReportNum>
  </div>
</ReportCell>

组件接收值

<van-cell-group>
  <van-cell :title="title" value="更多" :to="to">
    <template #right-icon>
      <van-icon name="arrow" style="line-height: inherit;margin-left: 8px;" color="#AAAAAA" size="14px" />
    </template>
  </van-cell>
  <slot name='report'></slot>
</van-cell-group>

vue v-modal需动态使用时怎么用

需要通过computed的get和set进行监听，一般用于子父组件

<van-popup v-model="showPicker" position="bottom">
  <van-picker
    show-toolbar
    :columns="columns"
    @cancel="$emit('cancel')"
    @confirm="onConfirm"
  />
</van-popup>
export default {
    name:'PopupPicker',
    components: {
      [Popup.name]:Popup,
      [Picker.name]:Picker,
    },
    props:['isShow','columns'],
    computed: {
      showPicker:{
        get: function () {
          return this.isShow 
        },
        set:function (val) {
          this.$emit('cancel')
        },
      }
    },
}

vue 全局组件如何使用

最近开发项目用到了vant组件库，都是采用局部引入的方式，但是因为有很多组件是多个vue中引入，所以想要通过全局引入使用

分析：是方法调用不能使用全局引入,得局部引入

引入自定义组件Vue.use(PageLoading),报错如下图：

解决：正确引入

Vue.component(PageLoading.name, PageLoading);