search

wolichuang / dailyInterview

面试、工作中遇到的issue
0 stars 0 forks source link

vue 实战代码 #28

Open wolichuang opened 3 years ago

wolichuang commented 3 years ago

tab 切换

:class="currentIndex==index ? 'active' : ''" 
:style="currentIndex==index ? 'display:block' : 'display:none'"

Invalid default value for prop xx: Props with type Object/Array

组件之间传递数组

  props: {
    bannerImages: {
      type: Array,
      default: () => {
        return []
      }
    }
  },

异步跨组件监听值

// 子组件深度监听slots
watch: {
    imagesList: {
        handler: function (newval, oldval) {
            console.log('this.imagesList', this.imagesList)
        },
       immediate: true,
        deep: true
    }
},

vue修改对象属性值视图上没有更新

this.$set(this.obj, 'name', '新的值');
Vue.set(vm.obj, 'name', '新的值')

vue 封装引入多个组件

export { default as Banner } from './Banner/index.vue';
export { default as BreadCrumb } from './BreadCrumb/index.vue';
export { default as CreateMetting } from './CreateMetting/index.vue';
export { default as CrumbNav } from './CrumbNav/index.vue';
export { default as Footer } from './Footer/index.vue';
export { default as Layout } from './Layout/index.vue';
export { default as NavBox } from './NavBox/index.vue';
export { default as SvgIcon } from './SvgIcon/index.vue';

计算属性传递参数

可以返回 一个函数

es6 解构函数

let [a,b,c] = [1,2,3]

在父组件监听子组件的生命周期方法

如果你在父组件里想在子组件的mounted方法里边做一些事情

//父组件中这样写
<has-child
  :value="40"
  @hook:mounted="handleChildMounted"
/>

// 子组件中不用写东西
mounted () { 
},

vue 中使用双向数据流

vue父子通讯是单向数据流，也就是子组件不能修改父组件的值，但是在很多情况下是需要修改的，比如在做功能编辑的时候，子组件需要带入父组件的原始值，而且子组件也需要修改这个值，到最后的保存值在父组件中。

// 父组件
<step-two-other v-bind:stepTwoConfig.sync="monitorConfigStr"></step-two-other>

// 子组件
<el-input v-model="config"></el-input>
props: {
    stepTwoConfig: String
},
computed: {
    config: {
        get() {
            return this.stepTwoConfig
        },
        set(val) {
            this.$emit('update:stepTwoConfig', val)
        }
    }
}

列表进入详情页的传参问题

  1. query通过path切换路由，params通过name切换路由
  2. params动态路由传参，一定要在路由中定义参数，然后在路由跳转的时候必须要加上参数，否则就是空白页面
  3. params传参时，如果没有在路由中定义参数，也是可以传过去的，同时也能接收到，但是一旦刷新页面，这个参数就不存在了。 
    
// query通过path切换路由 this.$route.query.id   | /detail?id=1&user=123
<router-link :to="{path: 'Detail', query: { id: 1 }}">前往Detail页面</router-link>

// params通过name切换路由 this.$route.params.id | /detail/123

前往Detail页面 

### 本地开发环境请求服务器接口跨域的问题

proxyTable: { // 用‘/api’开头，代理所有请求到目标服务器, 以 api 代替 target 的接口域名 '/api': { target: 'http://jsonplaceholder.typicode.com', // 接口域名 changeOrigin: true, // 是否启用跨域 pathRewrite: { // '^/api': '' } } }

### UI库的按需加载

1. 安装babel-plugin-import插件使其按需加载：cnpm i babel-plugin-import -D
2. 在 .babelrc文件中中添加插件配置 ：

libraryDirectory {

"plugins": [
    // 这里是原来的代码部分
    // …………

    // 这里是要我们配置的代码
    ["import",
        {
            "libraryName": "vant",
            "libraryDirectory": "es",
            "style": true
        }
    ]
]

}

在main.js中按需加载你需要的插件： // 按需引入vant组件 import { DatetimePicker, Button, List } from 'vant';

// 使用vant组件 Vue.use(DatetimePicker) .use(Button) .use(List);

// 最后在在页面中使用：

按钮 

### 只在当前页面中覆盖ui库中组件的样式

.van-tabs /deep/ .van-ellipsis { color: blue};

.van-tabs >>> .van-ellipsis { color: blue};

### 销毁定时器

// 通过$once来监听定时器，在beforeDestroy钩子可以被清除。 this.$once('hook:beforeDestroy', () => { clearInterval(timer); })

### rem文件的导入问题

(function(c, d) { var e = document.documentElement || document.body, a = "orientationchange" in window ? "orientationchange" : "resize", b = function() { var f = e.clientWidth; e.style.fontSize = f >= 750 ? "100px" : 100 * (f / 750) + "px"; }; b(); c.addEventListener(a, b, false); })(window);


### 轮播组件

安装 cnpm install vue-awesome-swiper --save 在组件中使用的方法，全局使用意义不大 // 引入组件 import 'swiper/dist/css/swiper.css' import { swiper, swiperSlide } from 'vue-awesome-swiper'

// 在components中注册组件 components: { swiper, swiperSlide }

// template中使用轮播 // ref是当前轮播 // callback是回调 // 更多参数用法，请参考文档 <swiper :options="swiperOption" ref="mySwiper" @someSwiperEvent="callback">

<swiper-slide><div class="item">1</div></swiper-slide>
<swiper-slide><div class="item">2</div></swiper-slide>
<swiper-slide><div class="item">3</div></swiper-slide>

<!-- Optional controls -->
<div class="swiper-pagination"  slot="pagination"></div>
<div class="swiper-button-prev" slot="button-prev"></div>
<div class="swiper-button-next" slot="button-next"></div>
<div class="swiper-scrollbar"   slot="scrollbar"></div>

// 参数要写在data中 data() { return { // swiper轮播的参数 swiperOption: { // 滚动条 scrollbar: { el: '.swiper-scrollbar', }, // 上一张，下一张 navigation: { nextEl: '.swiper-button-next', prevEl: '.swiper-button-prev', }, // 其他参数………… } } },

### fastClick的300ms延迟

cnpm install fastclick -S import FastClick from 'fastclick'; // 引入插件 FastClick.attach(document.body); // 使用 fastclick


### 路由懒加载

路由懒加载可以帮我们在进入首屏时不用加载过度的资源，从而减少首屏加载速度。

... { path: '/shipin', component: Layout, redirect: '/shipin/my', children: [ { path: 'my', name: 'my', component: () => import('@/pages/shipin/my'), meta: { title: '我的会议', headerTemplate: 1 } }, { path: 'control-meeting', name: 'control-meeting', component: (resolve) => require(['@/pages/shipin/control-meeting.vue'], resolve), // component: () => import('@/pages/shipin/control-meeting.vue'), meta: { title: '会议控制', headerTemplate: 1 } } ] },


### vue 使用  moment.js

  1. http://momentjs.cn/docs/#/displaying/

  2. import moment from 'moment' Vue.prototype.$moment = moment moment.locale('zh-cn')

  3. 组件中使用 import moment from "moment"; filters: { filterCalendar(calendar) { return moment(calendar).format('YYYY MMM Do dddd') }, filterTimes(times) { return moment(times).format('hh:mm') } },