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

动态组件

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

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

<component v-bind:is="currentView">
  <!-- 组件在 vm.currentview 变化时改变！ -->
</component>

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：

<div id="parent">
  <user-profile ref="profile"></user-profile>
</div>

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#异步组件

v-once

定义方法：

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

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