Vue.js——60分钟组件快速启动详解(上)

时间：2021-09-07 来源：互联网编辑：宝哥软件园浏览：次

组件简介

组件系统是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/。

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

1.var Child=Vue.extend(.)定义子组件构造函数

2.var Parent=Vue.extend(.)定义父组件构造函数

3.组件： { '子组件' : Child}，将子组件注册到父组件，并将子组件的标签设置为子组件。

4.模板：“PTHIS是一个父组件/PChild组件/Child组件”，它在父组件中以标签的形式使用子组件。

5.vue。组件(‘父组件’，Parent)全局注册父组件

6.使用页面中的父组件标记来呈现父组件的内容，同时也呈现子组件的内容

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

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

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 } })使用道具

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

道具基础示例

下面的代码定义了一个子组件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 :[' myName '，' 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='父组件数据属性'/子组件prop

单向绑定

既然父组件将数据传递给了子组件，那么如果子组件修改了数据，对父组件是否会有所影响呢？

我们将子组件模板和页面超文本标记语言稍作更改：

div id='app '表tr th colspan='3 '父组件数据/TD/tr TD name/TD TD TD TD { { name } }/TD TD TD input type=' text ' v-model=' name '/TD/tr tdage/TD TD { { age } }/TD TD tdinput type=' text ' v-model=' age '/TD/tr/table my-component v-bind : my-name=' name ' v-bind : my-age=' age '/my-component/div模板id=' my component ' table tr th colspan=' 3 '子组件数据/TD/tr t我的名字/TD TD { { myName } }/TD t输入类型=' text ' v-model=' myName '/TD/tr t我的年龄/TD { { Myage } }/TD t输入类型=' text ' v-model=' Myage '/TD/tr/table/template运行这个页面，我们做两个小试验：

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

修改了子组件的数据，没有影响父组件的数据。

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

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

支柱默认是单向绑定：当父组件的属性变化时，将传导给子组件，但是反过来不会。这是为了防止子组件无意修改了父组件的状态

双向绑定

可以使用。同步显式地指定双向绑定，这使得子组件的数据修改会回传给父组件。

my-component v-bind : my-name。sync=' name ' v-bind : my-age。sync=' age '/my-component(9515 . 163.com)

单次绑定

可以使用。一次显式地指定单次绑定，单次绑定在建立之后不会同步之后的变化，这意味着即使父组件修改了数据，也不会传导给子组件。

my-component v-bind : my-name。once=' name ' v-bind : my-age。once=' age '/my-component(9516 . 163.com)

示例

为了尽快消化这些知识，我们来做一个小示例吧。

！DOCTYPE html html head meta charset=' UTF-8 ' title/title link rel='样式表href=' style/demo。CSS头体div id=' app ' div id=' searchBar '搜索输入类型=' 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 3360['姓名','年龄','性别]，grindata :[{ 0姓名： '杰克'，年龄： 30,性别： '男性' },{姓名名称： '账单'，年龄3: 26,性别3:除了以上介绍的知识点，这个示例还用到了两个知识点：

1.支柱验证

props: { data:数组，第3360列数组，filterKey:字符串}这段代码表示：父组件传递过来的数据和列必须是排列类型，filterKey必须是字符串类型。

更多支柱验证的介绍，请参考：官方文档支柱验证

2.筛选依据过滤器

可以根据指定的字符串过滤数据。