Vue组件_销毁mitt-CSDN博客

//父组件
<div :msg="message" :user="user"></div>
data(){
    return {
        msg:"hello",
        user:"luyao"
    }
}
//子组件
<template>
    <p>{{msg}}</p>
    <p>{{user}}</p>
</template>
 
<script>
export default{
    props:['msg','user']
}
</script>

3.父子关系数据共享（子→父）

子组件通过自定义事件向父组件传值，通过v-model可以实现数据的双向绑定

//子组件
export default{
    emits:['nchange'],    //声明事件
    data(){return {n:0}},
    methods:{
        addn(){
            this.n++
            //数据变化时触发
            this.$emit('nchange',this.n)
        },
    },
}
//父组件
<div @nchange="getn"></div>
export default{
    data(){ return { nfromson:0 } },
    methods:{
        getn(n){
            this.nfromson = n
        },
    },
}

4.兄弟关系数据共享

通过EventBus实现兄弟关系传值

1.安装mitt依赖包

npm install mitt@2.1.0

2.创建公共的 EventBus 模块: eventBus.js

//导入包
import mitt from 'mitt'
//创建e实例对象
const bus = mitt()
//将实例对象共享出去
export default bus

3.在数据接收方定义事件

export default{
    data(){ return { count: 0}},
    created(){
        bus.on('countChange',(count)=>{
            this.count = count
        })
    }
}

4，在数据接发送方触发事件

export default{
    data(){ return { count: 0}},
    methods:{
        addCount(){
            this.count++
            bus.emit('countChange',this.count)
        }
    }
}

5.后代关系数据共享

1.在进行后代传参时使用到了 provide 和 inject 两种方法或形式

//父组件
export default{
    data(){
        return{
            color:'red' 
        }
    }
    provide(){    
        return{
            color: this.color,
        }
    }
}
//后代组件
<template>
    <h1>{{color}}</h1>
</template>
 
<script>
    export default{
        inject:['color']
    }
<script>
//父组件computed 函数向下共享响应式的数据
//从vue中按需导入computed函数
import { computed } from 'vue'
export default{
    data(){
        return { color: 'red'}
    },
    provider(){
        //使用computed函数，可以把要共享的数据包装为响应式数据
        return{
            color: computed(()=> this.color),
        }
    }
}
//如果父级节点共享的是响应式的数据，则子孙节点必须以 .value 的形式进行使用
<template>
    <h3>{{color.value}}</h3>
</template>
 
<script>
    export default{
        inject: ['color']
    }
</script>

三，动态组件&异步组件

1.在动态组件上使用 `keep-alive`

曾经在多标签的界面中使用 is 来切换不同的组件，为了保持这些组件的状态，可以使用keep-alive进行包裹，这样就可以将其缓存起来。

<keep-alive>
  <component :is="currentTabComponent"></component>
</keep-alive>

2.异步组件

在大型应用中，我们可能需要将应用分割成小一些的代码块，并且只在需要的时候才从服务器加载一个模块。为了简化，Vue 有一个 defineAsyncComponent 方法

const app = Vue.createApp({})
const AsyncComp = Vue.defineAsyncComponent(
  () =>
    new Promise((resolve, reject) => {
      resolve({
        template: '<div>I am async!</div>'
      })
    })
)
app.component('async-example', AsyncComp)

此方法接受返回 Promise 的工厂函数。从服务器检索组件定义后，应调用 Promise 的 resolve 回调。你也可以调用 reject(reason)，以指示加载失败。