Vue.js教程
1.11.8 杂项
阅读(

Vue.js 基础

Vue.js 安装

Vue.js 介绍

Vue.js 实例

Vue.js 模板语法

Vue.js 计算属性和侦听器

Vue.js Class 与 Style 绑定

Vue.js 条件渲染

Vue.js 列表渲染

Vue.js 事件处理

Vue.js 表单输入绑定

Vue.js 组件

动态组件

使用插槽分发内容

自定义事件

非 Prop 特性

Prop

使用组件

什么是组件

杂项

编写可复用组件

在编写组件时,最好考虑好以后是否要进行复用。一次性组件间有紧密的耦合没关系,但是可复用组件应当定义一个清晰的公开接口,同时也不要对其使用的外层数据作出任何假设。

Vue 组件的 API 来自三部分——prop、事件和插槽:

  • Prop允许外部环境传递数据给组件;
  • 事件允许从组件内触发外部环境的副作用;
  • 插槽允许外部环境将额外的内容组合在组件中。

使用v-bindv-on的简写语法,模板的意图会更清楚且简洁:

<my-component
  :foo="baz"
  :bar="qux"
  @event-a="doThis"
  @event-b="doThat"
>
  <img slot="icon" src="...">
  <p slot="main-text">Hello!</p>
</my-component>

子组件引用

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

<div id="parent">
  <user-profile ref="profile"></user-profile>
</div>
var parent = new Vue({ el: '#parent' })
// 访问子组件实例
var child = parent.$refs.profile

refv-for一起使用时,获取到的引用会是一个数组,包含和循环数据源对应的子组件。

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

异步组件

在大型应用中,我们可能需要将应用拆分为多个小模块,按需从服务器下载。为了进一步简化,Vue.js 允许将组件定义为一个工厂函数,异步地解析组件的定义。Vue.js 只在组件需要渲染时触发工厂函数,并且把结果缓存起来,用于后面的再次渲染。例如:

Vue.component('async-example', function (resolve, reject) {
  setTimeout(function () {
    // 将组件定义传入 resolve 回调函数
    resolve({
      template: '<div>I am async!</div>'
    })
  }, 1000)
})

工厂函数接收一个resolve回调,在收到从服务器下载的组件定义时调用。也可以调用reject(reason)指示加载失败。这里使用setTimeout只是为了演示,实际上如何获取组件完全由你决定。推荐配合webpack 的代码分割功能来使用:

Vue.component('async-webpack-example', function (resolve) {
  // 这个特殊的 require 语法告诉 webpack
  // 自动将编译后的代码分割成不同的块,
  // 这些块将通过 Ajax 请求自动下载。
  require(['./my-async-component'], resolve)
})

你可以在工厂函数中返回一个Promise,所以当使用 webpack 2 + ES2015 的语法时可以这样:

Vue.component(
  'async-webpack-example',
  // 该 `import` 函数返回一个 `Promise` 对象。
  () => import('./my-async-component')
)

当使用局部注册时,也可以直接提供一个返回Promise的函数:

new Vue({
  // ...
  components: {
    'my-component': () => import('./my-async-component')
  }
})

如果你是Browserify用户,可能就无法使用异步组件了,它的作者已经表明Browserify 将“永远不会支持异步加载”。Browserify 社区发现了一些解决方法,可能会有助于已存在的复杂应用。对于其他场景,我们推荐使用 webpack,因为它对异步加载进行了内置、全面的支持。

高级异步组件

2.3.0 新增

自 2.3.0 起,异步组件的工厂函数也可以返回一个如下的对象:

const AsyncComp = () => ({
  // 需要加载的组件。应当是一个 Promise
  component: import('./MyComp.vue'),
  // 加载中应当渲染的组件
  loading: LoadingComp,
  // 出错时渲染的组件
  error: ErrorComp,
  // 渲染加载中组件前的等待时间。默认:200ms。
  delay: 200,
  // 最长等待时间。超出此时间则渲染错误组件。默认:Infinity
  timeout: 3000
})

注意,当一个异步组件被作为vue-router的路由组件使用时,这些高级选项都是无效的,因为在路由切换前就会提前加载所需要的异步组件。另外,如果你要在路由组件中使用上述写法,需要使用vue-router2.4.0 以上的版本。

组件命名约定

当注册组件 (或者 prop) 时,可以使用 kebab-case (短横线分隔命名)、camelCase (驼峰式命名) 或 PascalCase (单词首字母大写命名)。

// 在组件定义中
components: {
  // 使用 kebab-case 注册
  'kebab-cased-component': { /* ... */ },
  // 使用 camelCase 注册
  'camelCasedComponent': { /* ... */ },
  // 使用 PascalCase 注册
  'PascalCasedComponent': { /* ... */ }
}

在 HTML 模板中,请使用 kebab-case:

<!-- 在 HTML 模板中始终使用 kebab-case -->
<kebab-cased-component></kebab-cased-component>
<camel-cased-component></camel-cased-component>
<pascal-cased-component></pascal-cased-component>

当使用字符串模式时,可以不受 HTML 大小写不敏感的限制。这意味实际上在模板中,你可以使用下面的方式来引用你的组件:

  • kebab-case
  • camelCase 或 kebab-case (如果组件已经被定义为 camelCase)
  • kebab-case、camelCase 或 PascalCase (如果组件已经被定义为 PascalCase)
components: {
  'kebab-cased-component': { /* ... */ },
  camelCasedComponent: { /* ... */ },
  PascalCasedComponent: { /* ... */ }
}
<kebab-cased-component></kebab-cased-component>

<camel-cased-component></camel-cased-component>
<camelCasedComponent></camelCasedComponent>

<pascal-cased-component></pascal-cased-component>
<pascalCasedComponent></pascalCasedComponent>
<PascalCasedComponent></PascalCasedComponent>

这意味着 PascalCase 是最通用的声明约定而 kebab-case 是最通用的使用约定。

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

<my-component/>

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

递归组件

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

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

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

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

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

name: 'stack-overflow',
template: '<div><stack-overflow></stack-overflow></div>'

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

组件间的循环引用

假设你正在构建一个文件目录树,像在 Finder 或资源管理器中。你可能有一个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将这两个组件注册为全局组件的时候,框架会自动为你解决这个矛盾。如果你已经是这样做的,就跳过下面这段吧。

然而,如果你使用诸如 webpack 或者 Browserify 之类的模块化管理工具来 require/import 组件的话,就会报错了:

Failed to mount component: template or render function not defined.

为了解释为什么会报错,简单的将上面两个组件称为 A 和 B。模块系统看到它需要 A,但是首先 A 需要 B,但是 B 需要 A,而 A 需要 B,循环往复。因为不知道到底应该先解析哪个,所以将会陷入无限循环。要解决这个问题,我们需要在其中一个组件中告诉模块化管理系统:“A 虽然最后会用到 B,但是不需要优先导入 B”。

在我们的例子中,可以选择让tree-folder组件中来做这件事。我们知道引起矛盾的子组件是tree-folder-contents,所以我们要等到beforeCreate生命周期钩子中才去注册它:

beforeCreate: function () {
  this.$options.components.TreeFolderContents = require('./tree-folder-contents.vue').default
}

问题解决了!

内联模板

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

<my-component inline-template>
  <div>
    <p>这些将作为组件自身的模板。</p>
    <p>而非父组件透传进来的内容。</p>
  </div>
</my-component>

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

X-Template

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

<script type="text/x-template" id="hello-world-template">
  <p>Hello hello hello</p>
</script>
Vue.component('hello-world', {
  template: '#hello-world-template'
})

这在有很多大模板的演示应用或者特别小的应用中可能有用,其它场合应该避免使用,因为这将模板和组件的其它定义分离了。

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

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

Vue.component('terms-of-service', {
  template: '\
    <div v-once>\
      <h1>Terms of Service</h1>\
      ...很多静态内容...\
    </div>\
  '
})

如果本教程对您帮助很大,请随意打赏。您的支持,将鼓励我们提供更好的教程!

← 键盘方向键翻页 →
返回顶部 手机访问 关注微信 返回底部

扫码访问歪脖网

随时随地,想看就看

关注歪脖网微信

分享 web 知识、交流 web 经验