vue.js中component的使用示例
导读:本文共1867.5字符,通常情况下阅读需要6分钟。同时您也可以点击右侧朗读,来听本文内容。按键盘←(左) →(右) 方向键可以翻页。
摘要: vue.js中component的使用方法:1、扩展HTML元素,封装可重用的代码;2、组件是自定义元素,【Vue.js】的编译器为它添加特殊功能;3、组件也可以是原生HTML元素的形式,以is特性扩展。vue.js中component的使用方法:什么是组件按照惯例,引用Vue官网的一句话:组件 (Component) 是 Vue.js 最强大的功能之一。组件可... ...
目录
(为您整理了一些要点),点击可以直达。vue.js中component的使用方法:1、扩展HTML元素,封装可重用的代码;2、组件是自定义元素,【Vue.js】的编译器为它添加特殊功能;3、组件也可以是原生HTML元素的形式,以is特性扩展。
vue.js中component的使用方法:
什么是组件
按照惯例,引用Vue官网的一句话:
组件 (Component) 是 Vue.js 最强大的功能之一。组件可以扩展 HTML 元素,封装可重用的代码。在较高层面上,组件是自定义元素,Vue.js 的编译器为它添加特殊功能。在有些情况下,组件也可以是原生 HTML 元素的形式,以 is 特性扩展。
组件component的注册
全局组件:
局部注册:
DOM模板解析说明
组件在某些HTML标签下会受到一些限制。
比如一下代码,在table标签下,组件是无效的。
解决方法是,通过is属性使用组件
应当注意,如果您使用来自以下来源之一的字符串模板,将不会受限
JavaScript内联模版字符串
.vue
组件
data使用函数,避免多组件互相影响
html
js
如上,div下有三个组件,每个组件共享一个counter。当任意一个组件被点击,所有组件的counter都会加一。
解决办法如下
js
这样每个组件生成后,都会有自己独享的counter。
vue.js中component的使用示例的详细内容,希望对您有所帮助,信息来源于网络。