Vue.js 学习(9) -- 组件2

矫情吗；* 2022-06-15 06:29 93阅读 0赞

## 动态组件 ##

组件在声明后，可以在任意地方挂载和卸载：使用Vue保留的元素compoment的is特性可以挂载组件，当有多个组件的时候，还可以来回切换。

不看代码说清楚比较费劲，下面是栗子：

var vm = new Vue({
      el: '#example',
      data: {
        currentView: 'Home'
      },
      components: {
        Home: Home,
        posts: { /* ... */ },
        archive: { /* ... */ }
      }
    })

var Home = {
      template: '<p>Welcome home!</p>'
    }
    //...

**keep-alive**

切换缓存。

> 如果把切换出去的组件保留在内存中，可以保留它的状态或避免重新渲染。为此可以添加一个 keep-alive 指令参数.

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

## 其他 ##

**1、组件API**  
组件API来自于三部分：

1.  props：允许外部环境传递数据给组件
2.  Events：允许组件触发外部环境事件
3.  Slots：允许组件将外部环境的内容整合在组件中

**2、子组件索引**

可以使用属性ref为子组件指定一个索引ID：

var parent = new Vue({ el: '#parent' })
    // 访问子组件
    var child = parent.$refs.profile

注意：$refs 只在组件渲染完成后才填充，并且它是非响应式的。它仅仅作为一个直接访问子组件的应急方案——应当避免在模版或计算属性中使用 $refs 。

**3、递归组件**

组件在自己的模版内可以递归的调用自己，但是必须为组件定义name

name: 'unique-name-of-my-component'

使用递归要格外小心无尽循环导致内存溢出的问题。因此，如果要使用递归，请确保你的递归有终止条件。

**组件之间的循环引用**

tree-folder组件的定义：

<p> <span>{ { folder.name }}</span> <tree-folder-contents :children="folder.children"/> </p>

tree-folder-contents 组件的定义：

<ul> <li v-for="child in children"> <tree-folder v-if="child.children" :folder="child"/> <span v-else>{ { child.name }}</span> </li> </ul>

通过阅读上面两段代码，我们可以发现，这两个组件是循环引用的。在这种时候，请务必使用Vue.component 全局注册组件。

但是如果使用模块系统，这样可能还是会存在问题，解决方案请参见：  
[https://vuefe.cn/v2/guide/components.html\#][https_vuefe.cn_v2_guide_components.html]异步组件

**v-once**

定义方法：

Vue.component('terms-of-service', {
      template: '
        <div v-once>
          <h1>Terms of Service</h1>
          ... a lot of static content ...
        </div>
      '
    })

使用这种方式定义的组件可以将渲染结果缓存。但是同时，这个组件只加载一次。静态内容可以考虑使用。

[https_vuefe.cn_v2_guide_components.html]: https://vuefe.cn/v2/guide/components.html#