Vue学习笔记入门篇——组件杂项

本文为转载,原文:Vue学习笔记入门篇——组件杂项

动态组件

通过使用保留的 <'component'> 元素,动态地绑定到它的 is 特性,我们让多个组件可以使用同一个挂载点,并动态切换:

var home = {
    template:'

this is home

' } var posts = { template:'

this is posts

' } var archive = { template:'

this is archive

' } var app = new Vue({ el:'#app', data:{ currentView:'home' }, components:{ home:home, posts:posts, archive:archive } })

运行结果:


Vue学习笔记入门篇——组件杂项_第1张图片

在控制台中修改app.currentView的值,界面会动态发生改变。
如果把切换出去的组件保留在内存中,可以保留它的状态或避免重新渲染。为此可以添加一个 keep-alive 指令参数:


  
    
  

编写可复用组件

在编写组件时,记住是否要复用组件有好处。一次性组件跟其它组件紧密耦合没关系,但是可复用组件应当定义一个清晰的公开接口。
Vue 组件的 API 来自三部分 - props, events 和 slots :

Props 允许外部环境传递数据给组件
Events 允许从外部环境在组件内触发副作用
Slots 允许外部环境将额外的内容组合在组件中

子组件索引

尽管有 props 和 events,但是有时仍然需要在 JavaScript 中直接访问子组件。为此可以使用 ref 为子组件指定一个索引 ID。例如:

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

当 ref 和 v-for 一起使用时,ref 是一个数组,包含相应的子组件。

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

组件命名约定

当注册组件 (或者 props) 时,可以使用 kebab-case,camelCase,或 PascalCase。
在 HTML 模版中,请使用 kebab-case 形式。
当使用字符串模式时,可以不受 HTML 的 case-insensitive 限制。

components: {
  'kebab-cased-component': { /* ... */ },
  camelCasedComponent: { /* ... */ },
  PascalCasedComponent: { /* ... */ }
}

如果组件未经 slot 元素传递内容,你甚至可以在组件名后使用 / 使其自闭合.


当然,这只在字符串模版中有效。因为自闭的自定义元素是无效的 HTML,浏览器原生的解析器也无法识别它。

递归组件

组件在它的模板内可以递归地调用自己,不过,只有当它有 name 选项时才可以:

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

当你利用Vue.component全局注册了一个组件, 全局的ID作为组件的 name 选项,被自动设置.

Vue.component('unique-name-of-my-component', {
  // ...
})

如果你不谨慎, 递归组件可能导致死循环:

name: 'stack-overflow',
template: '
'

上面组件会导致一个错误“max stack size exceeded”,所以要确保递归调用有终止条件 (比如递归调用时使用 v-if 并让他最终返回 false )。

内联模板

如果子组件有 inline-template 特性,组件将把它的内容当作它的模板,而不是把它当作分发内容。这让模板更灵活。

These are compiled as the component's own template.

Not parent's transclusion content.

    Vue.component('my-component',{
    })
    new Vue({
        el:'#app'
    })

运行结果:


Vue学习笔记入门篇——组件杂项_第2张图片

但是 inline-template 让模板的作用域难以理解。最佳实践是使用 template 选项在组件内定义模板或者在 .vue 文件中使用 template 元素。

x-Templates

另一种定义模版的方式是在 JavaScript 标签里使用 text/x-template 类型,并且指定一个 id。例如:


Vue.component('hello-world', {
  template: '#hello-world-template'
})

这在有很多模版或者小的应用中有用,否则应该避免使用,因为它将模版和组件的其他定义隔离了。

对低开销的静态组件使用 v-once

尽管在 Vue 中渲染 HTML 很快,不过当组件中包含大量静态内容时,可以考虑使用 v-once 将渲染结果缓存起来,就像这样:

Vue.component('terms-of-service', {
  template: '\
    
\

Terms of Service

\ ... a lot of static content ...\
\ ' })

其他

还有一些异步组件,和递归组件暂时先不介绍,等以后学习到webpack时在说这个问题。

本文为原创,转载请注明出处。
上一节:Vue学习笔记入门篇——组件的内容分发(slot)
返回目录
下一节:Vue学习笔记进阶篇——单元素过度

你可能感兴趣的:(Vue学习笔记入门篇——组件杂项)