Technical essays on VUE project

Recently, I have been working on vUe-related projects, implementing the separation of front and back ends in the company, and reconstructing previous projects. I am really busy, one project after another, and there are endless pits to climb. If I say more, I will cry. Start the text!!

• The page content was not reloaded when the Vue route was switched. Cause: A component mounted hook was invoked to refresh the page content. Later, it was found that it was used in app.vue: Keep-Alive is a built-in component of Vue, which can keep the state in memory during component switching to prevent repeated DOM rendering. That’s the problem.

Solutions:

Hook Activated when a Vue component is activated instead of mounting hook activated:

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

Reference site about hooks to keep alive – components: https://cn.vuejs.org/v2/api/#activated

• File export involves file export, including XML and Excel. The export format varies according to the file type.

exportAllData(val){// Export allif(!val){
      this.exportFile(this.exportAllType);
    }
},
exportFile(exportType){
    let url=' '; // Interface address this.$axios.get(url,{responseType: 'arraybuffer'}).then(res => {
      this.download(res.data,exportType);
    },res => {
      this.$Message.error('Export failed');
    });
},
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'.'file');
    document.body.appendChild(link)
    link.click();
 }
Copy the code

• When the VUE multi-level component listens for actions and properties, you can use the following methods to listen

v-bind="$attrs" v-on="$listeners"
Copy the code

Vue version 2.4 provides this method of passing properties from the parent component that are not considered bound by the PROPS feature into the child component, usually in conjunction with the interitAttrs option. These two attributes are mentioned because they make communication between components across components simple and business-clear without vuEX and event bus dependencies.

<template> <div> <span>{{child1}}<span> <! C components can be triggered directlytestThe reason is that component B calls component C using the V-ON binding$listenersProperties - > <! -- Bind via v-bind$attrs< C v-bind= < C v-bind= < C v-bind= < C v-bind= < 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>Copy the code

C components

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

A component:

<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>Copy the code

Record some knowledge points used in daily development, as a summary.