分钟播放Vue.js组件

组件简介

组件系统是Vue.js的重要概念之一，它提供了一个抽象，这样我们就可以使用独立的可重用的小组件来构建大规模的应用程序，任何类型的应用程序接口都可以抽象为一个组件树：

那么什么是组件呢？组件可以扩展HTML元素并封装可重用的HTML代码。我们可以将组件视为定制的HTML元素。

组件创建和注册

基本步骤

使用Vue.js的组件有三个步骤：创建组件构造器、注册组件和使用组件。

下面的代码演示了这三个步骤：

！DOCTYPE htmlhtml正文div id='app '！- 3.#app是由Vue实例装载的元素。使用component-my-component/my-component/div/body script src=' http : js/vue . js '/script script//1。创建一个组件构造函数var my component=vue . extend({ template 3360 ' div)这是我的第一个组件！/div' }) //2。注册组件并指定组件的标签。组件的HTML标签是my-component vue.component(' my-component '，my component)new vue({ El : ' # app ' })；/script/html运行如下：

如您所见，使用组件与使用普通的HTML元素没有什么不同。

了解组件的创建和注册

我们使用以下步骤来理解组件的创建和注册：1。Vue.extend()是Vue构造函数的扩展，调用Vue.extend()会创建一个组件构造函数，而不是一个特定的组件实例。2.vue.extend()构造函数有一个选项对象，该选项对象的模板属性用于定义组件要呈现的HTML。3.使用Vue.component()注册组件时，需要提供两个参数，第一个参数是组件的标签，第二个参数是组件构造函数。4.vue.component()方法将调用组件构造函数来创建组件实例。5.该组件应该安装在Vue实例下，否则它不会生效。

注意第五点。下面的代码在三个地方使用了my-component标签，但是只有#app1和#app2下的my-component标签有效。

！DOCTYPE htmlhtml正文div id=' app 1 ' my-component/my-component/div id=' app 2 ' my-component/my-component/div！-组件将不被呈现-my-component/my-component/body script src=' http 3360 js/vue . js '/script script var my component=vue . extend({ template 3360 ' div这是一个组件！/div ' })Vue.component(' my-component '，my component)var app 1=new Vue({ El : ' # app 1 ' })；var app 2=new Vue({ El : ' # app 2 ' })/script/html

全球注册和本地注册

当调用Vue.component()注册组件时，组件的注册是全局的，这意味着该组件可以在任何Vue实例下使用。如果不需要全局注册，或者组件用在其他组件中，可以使用option对象的components属性实现本地注册。

以上示例可以更改为本地注册：

！DOCTYPE htmlhtml正文div id='app '！- 3.my-component只能在# app-my-component/my-component/div/body script src=' http : js/vue . js '/script script//1下使用。创建一个组件构造函数var my component=vue . extend({ template : ' div)这是我的第一个组件！/div'})新Vue ({el:' # app '，components 3360 {//2。将myComponent注册到vue实例下的“my-component”: my component } })；/script/html由于my-component组件是在与#app元素对应的Vue实例下注册的，因此不能在其他Vue实例下使用。div id='app2 '！-您不能使用my-component组件，因为my-component是本地组件，属于# app-my-component/my-component/div script new vue({ El : ' # app 2 ' })；/script如果这样做，浏览器将提示一个错误：

父组件和子组件

我们可以定义和使用组件中的其他组件，这构成了父子组件关系。

！DOCTYPE html html body div id=' app ' parent-component/parent-component/div/body script src=' http : js/vue . js '/script script var Child=vue . extend({ template : ' p这是一个子组件！/p' }) var Parent=Vue.extend({ //使用子组件标记模板：' his是父组件/pchild-component/Child-component '中的父组件，components 3360 {//部分注册Child component，只能使用' Child-component ' 3360 Child } })//全局注册Parent component vue.component(' Parent-component '，Parent)new vue({ El 3360 ' # app ' })/script/。

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

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

Var Child=Vue.extend(…)定义子组件构造函数var Parent=Vue.extend(…)定义父组件构造函数components 3360 { ' Child-component ' : Child })，向父组件注册子组件，并将子组件的标签设置为子组件。模板：“这是父组件/子组件/子组件”，使用子组件作为父组件中的标记。Vue。组件(‘Parent-component’，Parent)全局注册父组件，用页面中的标签呈现父组件的内容，同时也呈现子组件的内容。

子组件在父组件中注册，只能在父组件中使用。确切地说，子组件只能在父组件的模板中使用。

请注意，以下两个子组件使用不正确：

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

Div id=' app '父组件子组件/子组件/父组件/div为什么这个方法无效？因为当子组件向父组件注册时，Vue.js会编译父组件的模板，所以模板的内容已经决定了父组件将呈现的HTML。

父组件相当于运行时，它的一些子标签只会作为普通的HTML执行。子组件不是标准的HTML标记，浏览器会直接忽略它。

2.使用父组件标签之外的子组件

Div id=' app '父组件/父组件子组件/子组件/div运行此代码，浏览器将提示以下错误

组件注册语法糖

注册上述组件的方式有些麻烦。为了简化这个过程，Vue.js提供了注册语法sugar。

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

//全局注册，my-component1是标签名vue.component ('my-component1 '，{template:' div这是第一个组件！/div ' })varv m1=new vue({ El : ' # app 1 ' })vue.component()的第一个参数是标记名，第二个参数是选项对象，组件模板由选项对象的template属性定义。这样，Vue会自动调用其后面的Vue.extend()。

在选项对象的components属性中实现本地注册：

Varvm2=newvue ({el:' # app2 '，components 3360 {//在本地注册，my-components 2是标签名' my-components 2 ' : { template 3360 ' div这是第二个组件！/div' }，//部分注册，my-component3是标签名' my-component 3 ' : { template 3360 ' div这是第三个组件！/div'} }})使用脚本或模板标记

虽然语法糖简化了组件注册，但是在模板选项中拼接HTML元素比较麻烦，导致HTML和JavaScript之间耦合度高。幸运的是，Vue.js提供了两种方法来分离JavaScript中定义的HTML模板

使用脚本标签

！DOCTYPE htmlhtml正文div id=' app ' my-component/my-component/div脚本类型=' text/x-template ' id=' my component ' div这是一个组件！/div/script/body script src=' http : js/vue . js '/script script vue.component(' my-component '，{ template 3360 ' # my component ' })new vue({ El : ' # app ' })/script/HTML template选项不再是HTML元素，而是id。Vue.js根据这个id查找对应的元素，然后将这个元素中的html编译为模板。

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

使用模板标签

如果使用模板标记，则不需要指定类型属性。

！DOCTYPE html html head meta charset=' UTF-8 ' title/title/head body div id=' app ' my-component/my-component/div模板id=' my component ' div这是一个组件！/div/template/body script src=' http : js/vue . js '/script script vue.component(' my-component '，{ template 3360 ' # my component ' })new vue({ El : ' # app ' })/script/HTML在了解了组件的创建和注册过程后，我建议使用脚本或模板标签来定义组件的HTML模板。这使得HTML代码和JavaScript代码分开，易于阅读和维护。此外，在Vue.js中，您可以使用。vue后缀并在。vue文件，我将在后面的文章中介绍它

组件的El和数据选项

传递到Vue构造函数中的大多数选项也可以在Vue.extend()或Vue.component()中使用，但有两个例外：data和el。Vue.js规定，在定义组件的选项时，数据和el选项必须使用函数。

当执行以下代码时，浏览器将引发错误

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

此外，如果数据选项指向一个对象，这意味着所有组件实例共享一个数据。我们应该使用一个函数作为数据选项，让这个函数返回一个新的对象：

Vue.component ('my-component '，{ data : function(){ return { a : 1 } })使用道具

组件实例的范围是独立的。这意味着父组件的数据不能也不应该在子组件的模板中直接引用。您可以使用道具将数据传递给子组件。

props基本示例下面的代码定义了一个子组件my-component，并定义了Vue实例中的数据选项。

var vm=new Vue({ el: '#app '，data: { name: 'keepfool '，age: 28 }，components : { ' my-component ' : { template 3360 ' # my component '，prop 3360[' my name '，' myage']})为便于理解，可以将此Vue实例视为my-component的父组件。如果要使用父组件的数据，首先要在子组件中定义props属性，也就是prop :['我的名字'，' myage']的代码。

为子组件定义HTML模板：

模板id=' my component ' table tr th colspan=' 2 '子组件数据/th/tr tdmy name/TD TD { { my name } }/TD/tr tdmy age/TD { { my age } }/TD/tr/table/template通过定义的props属性将父组件数据传输到子组件：

div id=' app ' my-component v-bind : my-name=' name ' v-bind : my-age=' age '/my-component/div注意：在子组件中定义prop时使用camelCase命名法。由于HTML特性不区分大小写，所以当camelCase的prop用于特性时，需要将其转换为烤肉串大小写(由短水平线分隔)。例如，在prop中定义的myName在用作属性时需要转换为my-name。

该程序的运行结果如下：

父组件如何将数据传递给子组件？相信看完下面这张图，也许你就能很好的理解了。

当父组件中使用子组件时，数据通过以下语法传递给子组件：

子组件v-bind:子组件prop='父组件数据属性'/子组件

道具绑定类型

单向绑定

由于父组件将数据传递给子组件，如果子组件修改数据，是否会影响父组件？我们稍微更改了子组件模板和页面HTML:

Div id='app' table tr th colspan='3 '父组件数据/TD/Tr TD name/TD TD { { name } }/TD输入类型=' text ' v-model=' name '/TD/Tr Tr TD age/TD { { age } }/TD TD tdinput类型=' text ' v-model=' age '/TD/Tr/table my-component v-bind : my-name=' name ' v-bind : my-age=' age '/my-component/

1.修改页面上子组件的数据

子组件的数据被修改，但是父组件的数据不受影响。

2.修改页面上父组件的数据

修改父组件的数据，同时影响子组件。

默认情况下，Prop是单向绑定：当父组件的属性发生变化时，它将被传输到子组件，但不会反过来。这是为了防止子组件无意中修改父组件的状态

双向绑定

可以使用显式指定双向绑定。sync，这将导致子组件的数据修改被传递回父组件。

my-component v-bind : my-name . sync=' name ' v-bind : my-age . sync=' age '/my-component

单一绑定

你可以用。一次为显式指定单个绑定，这将不会在建立后同步更改，这意味着即使父组件修改了数据，也不会将其传输到子组件。

my-component v-bind : my-name . once=' name ' v-bind : my-age . once=' age '/my-component

例子

为了尽快消化这些知识，我们举个小例子。

！DOCTYPE html html head meta charset=' UTF-8 ' title/title link rel='样式表' href=' styles/demo . CSS '/head body div id=' app ' div id=' searchBar ' Search输入类型=' text ' v-model=' Search query '/div simple-grid : data=' grid ATA ' : columns=' grid columns ' : filter-key=' Search query '/simple-grid/div template id=' grid-template ' table d filter key : String } })var demo=new Vue({ El : ' # app '，data: { searchQuery: ' '，gridColumns: ['姓名'，'年龄'，'性别']，grindata :[{姓名： 'Jack '，年龄： 30，性别： '男性' }，{姓名3: ' Bill '，年龄3: 26，性别3:

1.正确验证

Props: {data:Array，columns3360array，filterKey3360string}此代码表示父组件传递的数据和列必须是数组类型，filterKey必须是字符串类型。关于道具验证的更多介绍，请参考官方文件道具验证

2.filterBy筛选器可以根据指定的字符串筛选数据。

摘要

使用组件的前提是创建和注册组件。本文详细介绍了组件从创建到使用的步骤，并介绍了几种不同的创建和注册组件的方法；然后介绍了组件的道具选项，用于将父组件的数据传递给子组件。最后，我们用一个小例子来演示这些知识点。

本文已整理成《Vue.js前端组件学习教程》，欢迎大家学习阅读。

关于vue.js组件的教程，请点击专题vue.js组件学习教程学习。

下一篇文章地址：在几分钟内播放Vue.js组件(2)

以上就是本文的全部内容。希望对大家的学习有帮助，支持我们。