Техническое эссе проекта Vue

внешний интерфейс Excel Vue.js Vuex

В последнее время я работаю над проектами, связанными с Vue, реализовал разделение фронтенда и бэкенда в компании, реконструировал предыдущие проекты, очень занят, один проект за другим, и лазить можно бесконечно. Начните текст! ! !

  • Содержимое страницы не перезагружается при переключении маршрута Vue
    Причина проблемы: Содержимое страницы обновления вызывается в хуке, смонтированном компонентом, но тест показал, что этот хук не был вызван. Позже выяснилось, что App.vue использовал: keep-alive — это встроенный компонент Vue, который может сохранять состояние в памяти во время переключения компонентов, предотвращая повторный рендеринг DOM. Это проблема.

Решение:

Используйте компонент Vue, чтобы переключить активированный обработчик процесса (вызывается при активации компонента поддержания активности) вместо установленного обработчика монтирования:


<script>
export default {
  activated: function() {
    this.getData()
  }
}
</script>

URL ссылкиХуки о компонентах поддержки активности: https://cn.vuejs.org/v2/api/#activated

  • Метод экспорта файла
    Проект предполагает файловый экспорт, который делится на экспорт в xml и excel. Разные файлы имеют разные форматы экспорта, и вам необходимо определить формат экспорта в соответствии с типом файла.
exportAllData(val){
    //全部导出
    if(!val){
      this.exportFile(this.exportAllType);
    }
},
exportFile(exportType){
    let url='';//接口地址
    this.$axios.get(url,{responseType: 'arraybuffer'}).then(res => {
      this.download(res.data,exportType);
    },res => {
      this.$Message.error('导出失败');
    });
},
download (data,exportType) {
    if (!data) {
      return
    }
    let exportGs='';
    if(exportType==='excel'){
      exportGs='application/vnd.ms-excel';
    }else if(exportType==='xml'){
      exportGs='text/xml';
    }
    let url = window.URL.createObjectURL(new Blob([data],{type: exportGs}));
    let link = document.createElement('a')
    link.style.display = 'none'
    link.href = url;
    link.setAttribute('download', '文件');
    document.body.appendChild(link)
    link.click();
 }
  • Когда многоуровневые компоненты Vue отслеживают действия и свойства, вы можете использовать следующие методы для мониторинга.
v-bind="$attrs" v-on="$listeners"

Версия Vue 2.4 предоставляет этот метод для передачи свойств, которые не считаются привязкой атрибута props в родительском компоненте к дочернему компоненту, обычно используемому в сочетании с параметром interitAttrs. Причина, по которой упоминаются эти два свойства, заключается в том, что их появление делает межкомпонентное взаимодействие между компонентами кратким и понятным для бизнеса, не полагаясь на vuex и шину событий.

Например, компонент A => компонент B => компонент C и т. д. В этом многоуровневом компоненте компонент A передает данные компоненту C или, если событие компонента C должно инициировать событие в компоненте A, это можно записать в компоненте B как

<template>
 <div>
    <span>{{child1}}<span>
 <!-- C组件中能直接触发test的原因在于 B组件调用C组件时 使用 v-on 绑定了$listeners 属性 -->
 <!-- 通过v-bind 绑定$attrs属性，C组件可以直接获取到A组件中传递下来的props（除了B组件中props声明的） -->
 <c v-bind="$attrs" v-on="$listeners"></c>
 </div>
</template>
<script>
 import c from './c.vue';
 export default {
 props: ['child1'],
 data () {
 return {};
 },
 inheritAttrs: false,
 components: { c },
 mounted () {
    this.$emit('test1');
 }
 };
</script>

Компонент С

<template>
 <div>
    <span>{{child2}}<span>
 </div>
</template>
<script>
 export default {
 props: [child2'],
 data () {
 return {};
 },
 inheritAttrs: false,
 mounted () {
    this.$emit('test2');
 }
 };
</script>

Компонент:

<template>
 <div id="app">
    <b :child1="child1" :child2="child2" @test1="test1" @test2="test2"></b>
 </div>
</template>
<script>
 import b from './b.vue';
 export default {
 data () {
 return {
     child1:'hello child1',
     child2:'hello child2'
 };
 },
 components: { b },
 methods: {
 test1 () {
 console.log('test1');
 },
 test2 () {
 console.log('test2');
 }
 }
 };
</script>

Запишите некоторые точки знаний, используемые в ежедневном развитии, и сделайте резюме.

Категории