vue.js中组件的使用示例

这篇文章主要介绍vue.js中组件的使用示例,文中介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们一定要看完!

vue.js中组件的使用方法:1、扩展HTML元素,封装可重用的代码,2组件是自定义元素,【vue.js】的编译器为它添加特殊功能,3组件也可以是原生HTML元素的形式,以是特性扩展。

<强> vue。js中组件的使用方法:

<强>什么是组件

按照惯例,引Vue官用网的一句话:

组件是Vue(组件)。js最强大的功能之一。组件可以扩展HTML元素,封装可重用的代码。在较高层面上,组件是自定义元素,Vue。js的编译器为它添加特殊功能。在有些情况下,组件也可以是原生HTML元素的形式,以是特性扩展。

组件组件的注册

全局组件:

Vue.component (& # 39; todo-item& # 39;, { 　　道具才能:[& # 39;杂货店# 39;], 　　模板:才能& # 39;& lt; li> {{grocery.text}} & lt;/li> & # 39; 　　}) 　　var  app7 =, Vue ({new  　　el才能:“# app7", 　　数据:{才能 　　,,,groceryList:( 　　,,,,,{“id": 0,“text":“蔬菜“}, 　　,,,,,{“id": 1、“text":“奶酪,}, 　　,,,,,{“id": 2,“text":“其他“} 　　,,,) 　　,,} 　　}) & lt; div  id=癮pp7"比; 　　& lt;才能ol> 　　,,,& lt; todo项 　　,,,,,)=癵rocery 拷贝groceryList" 　　,,,,,v-bind:杂货=癵rocery" 　　,,,,,v-bind:关键=癵rocery.id"比; 　　,,,& lt;/todo-item> 　　& lt;才能/ol> 　　& lt;/div>

局部注册:

var  Child =, { 　　,模板:& # 39;& lt; div> A  custom 组件! & lt;/div> & # 39; 　　} 　　Vue ({new  　　,//? 　　,组件:{//才能,& lt; my-component>,将只在父模板可用 　　& # 39;才能my-component& # 39;:孩子 　　,} 　　})

<>强DOM模板解析说明

组件在某些HTML标签下会受到一些限制。

比如一下代码,在表标签下,组件是无效的。

& lt; table> 　　,& lt; my-row>……& lt;/my-row> 　　& lt;/table>

解决方法是,通过是属性使用组件

& lt; table> 　　,& lt; tr 是=癿y-row"祝辞& lt;/tr> 　　& lt;/table>

应当注意,如果您使用来自以下来源之一的字符串模板,将不会受限

& lt; script 类型=拔谋?x-template"在

JavaScript内联模版字符串

<代码>。vue>

<强>数据使用函数,避免多组件互相影响

html

& lt; div  id=癳xample-2"比; 　　,& lt; simple-counter> & lt;/simple-counter> 　　,& lt; simple-counter> & lt;/simple-counter> 　　,& lt; simple-counter> & lt;/simple-counter> 　　& lt;/div>

js

var  data =,{,计数器:0,} 　　Vue.component (& # 39; simple-counter& # 39;,, { 　　,模板:& # 39;& lt; button  v:点击=癱ounter  +=, 1“在{{,counter }} & lt;/button> & # 39; 　　,数据:function  (), { 　　,return 数据 　　,} 　　}) 　　Vue ({new  　　,el: & # 39; # example-2& # 39; 　　})

如上,div下有三个组件,每个组件共享一个计数器。当任意一个组件被点击,所有组件的柜台都会加一。

解决办法如下

js

Vue.component (& # 39; simple-counter& # 39;,, { 　　,模板:& # 39;& lt; button  v:点击=癱ounter  +=, 1“在{{,counter }} & lt;/button> & # 39; 　　,数据:function  (), { 　　return 才能{计数器:0} 　　,} 　　}) 　　Vue ({new  　　,el: & # 39; # example-2& # 39; 　　})

这样每个组件生成后,都会有自己独享的计数器。

以上是“vue.js中组件的使用示例”这篇文章的所有内容,感谢各位的阅读!希望分享的内容对大家有帮助,更多相关知识,欢迎关注行业资讯频道!

vue.js中组件的使用示例