vue直接操作DOM——ref，动态组件，缓冲组件

目录

1.ref 

2.动态组件

3.缓冲组件

---

 

1.ref 

• ref是vue中提供的一种可以直接操作DOM的方式

  • 具体使用方式如下

  • ​
    ​
    

  • 配合v-for来使用

  • ​
    ​
    

  • 通过ref操作子组件 

    • 在子组件中 写入ref 属性 这样我们就可以通过ref属性 来获取到子组件的vue实例对象了，这样也就可以获取到子组件实例对象中的数据、computed等内容了

    • ​
      ​
      

2.动态组件

• vue中给我们提供了一个内置组件 名为component 其作用是可以动态切换组件进行操作

• 用法：

  • <template>
        <div>
            <h1>{{content}}h1>
            <button>childbutton>
            <button>child1button>
            <button>child2button>
            
            <component is="VChild">component>
        div>
    template>
    ​
    ​
    

3.缓冲组件

• vue中还提供了另一个内置组件——keep-alive

• 使用keep-alive的步骤如下

  • 1.将要保持状态的元素或组件 写入keep-alive组件的内容

  •     <组件>
    

  • 这样就可以保持指定组件的状态了

  • 添加了keep-alive组件之后 会自动给内部组件 添加两个生命周期函数 activated deactivated

    • activated ：激活后生命周期

    • deactivated ：销毁后生命周期