Vue.js60分钟组件快速入门（上篇） - keepfool(2)_H5之家

我们分几个步骤来理解这段代码：

var Child = Vue.extend(...)定义一了个Child组件构造器

var Parent = Vue.extend(...)定义一个Parent组件构造器

components: { 'child-component': Child }，将Child组件注册到Parent组件，并将Child组件的标签设置为child-component。

template :'<p>This is a Parent component</p><child-component></child-component>'，在Parent组件内以标签的形式使用Child组件。

Vue.component('parent-component', Parent) 全局注册Parent组件

在页面中使用<parent-component>标签渲染Parent组件的内容，同时Child组件的内容也被渲染出来

Child组件是在Parent组件中注册的，它只能在Parent组件中使用，确切地说：子组件只能在父组件的template中使用。

请注意下面两种子组件的使用方式是错误的：

1. 以子标签的形式在父组件中使用

为什么这种方式无效呢？因为当子组件注册到父组件时，Vue.js会编译好父组件的模板，模板的内容已经决定了父组件将要渲染的HTML。
<parent-component>…</parent-component>相当于运行时，它的一些子标签只会被当作普通的HTML来执行，<child-component></child-component>不是标准的HTML标签，会被浏览器直接忽视掉。

2. 在父组件标签外使用子组件

运行这段代码，浏览器会提示以下错误

View Demo

组件注册语法糖

以上组件注册的方式有些繁琐，Vue.js为了简化这个过程，提供了注册语法糖。

使用Vue.component()直接创建和注册组件：

// 全局注册，my-component1是标签名称 Vue.component('my-component1',{ template: '<div>This is the first component!</div>' }) var vm1 = new Vue({ el: '#app1' })

Vue.component()的第1个参数是标签名称，第2个参数是一个选项对象，使用选项对象的template属性定义组件模板。
使用这种方式，Vue在背后会自动地调用Vue.extend()。

在选项对象的components属性中实现局部注册：

var vm2 = new Vue({ el: '#app2', components: { // 局部注册，my-component2是标签名称 'my-component2': { template: '<div>This is the second component!</div>' }, // 局部注册，my-component3是标签名称 'my-component3': { template: '<div>This is the third component!</div>' } } })

View Demo

使用script或template标签

尽管语法糖简化了组件注册，但在template选项中拼接HTML元素比较麻烦，这也导致了HTML和JavaScript的高耦合性。
庆幸的是，Vue.js提供了两种方式将定义在JavaScript中的HTML模板分离出来。

使用<script>标签

<!DOCTYPE html> <html> <body> <div> <my-component></my-component> </div> <script type="text/x-template"> <div>This is a component!</div> </script> </body> <script src="js/vue.js"></script> <script> Vue.component('my-component',{ template: '#myComponent' }) new Vue({ el: '#app' }) </script> </html>

template选项现在不再是HTML元素，而是一个id，Vue.js根据这个id查找对应的元素，然后将这个元素内的HTML作为模板进行编译。

注意：使用<script>标签时，type指定为text/x-template，意在告诉浏览器这不是一段js脚本，浏览器在解析HTML文档时会忽略<script>标签内定义的内容。

使用<template>标签

如果使用<template>标签，则不需要指定type属性。

<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> </head> <body> <div> <my-component></my-component> </div> <template> <div>This is a component!</div> </template> </body> <script src="js/vue.js"></script> <script> Vue.component('my-component',{ template: '#myComponent' }) new Vue({ el: '#app' }) </script> </html>

在理解了组件的创建和注册过程后，我建议使用<script>或<template>标签来定义组件的HTML模板。
这使得HTML代码和JavaScript代码是分离的，便于阅读和维护。
另外，在Vue.js中，可创建.vue后缀的文件，在.vue文件中定义组件，这个内容我会在后面的文章介绍。

组件的el和data选项

传入Vue构造器的多数选项也可以用在 Vue.extend() 或Vue.component()中，不过有两个特例： data 和el。
Vue.js规定：在定义组件的选项时，data和el选项必须使用函数。

下面的代码在执行时，浏览器会提出一个错误

Vue.component('my-component', { data: { a: 1 } })