Vue组件

目录

一，组件的生命周期

二，组件之间的数据共享

1，组件之间的关系

2，父子关系数据共享（父→子）

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

4.兄弟关系数据共享

5.后代关系数据共享

三，动态组件&异步组件

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

2.异步组件

---

一，组件的生命周期

组件的生命周期大体分为：创建 -> 运行（渲染） -> 销毁

1.在开始时import导入组件

2.components注册组件

3.像标签一样使用组件

4.创建组件实例对象

5.将实例渲染至页面

6.组件切换时销毁旧组件

二，组件之间的数据共享

1，组件之间的关系

父子关系，后代关系，兄弟关系

2，父子关系数据共享（父→子）

父组件通过v-bind属性绑定向子组件共享数据，子组件使用props接收数据

//父组件

data(){
    return {
        msg:"hello",
        user:"luyao"
    }
}
//子组件

 

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

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

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

export default{
    data(){ return { nfromson:0 } },
    methods:{
        getn(n){
            this.nfromson = n
        },
    },
}

4.兄弟关系数据共享

通过EventBus实现兄弟关系传值

1.安装mitt依赖包

npm install [email protected]

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,
        }
    }
}
//后代组件

 

三，动态组件&异步组件

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

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

2.异步组件

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

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

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