vue component组件使用方法详解
发布时间:2020-12-17 02:53:00 所属栏目:百科 来源:网络整理
导读:什么是组件 按照惯例,引用Vue官网的一句话: 组件 (Component) 是 Vue.js 最强大的功能之一。组件可以扩展 HTML 元素,封装可重用的代码。在较高层面上,组件是自定义元素,Vue.js 的编译器为它添加特殊功能。在有些情况下,组件也可以是原生 HTML 元素的形
什么是组件按照惯例,引用Vue官网的一句话: 组件 (Component) 是 Vue.js 最强大的功能之一。组件可以扩展 HTML 元素,封装可重用的代码。在较高层面上,组件是自定义元素,Vue.js 的编译器为它添加特殊功能。在有些情况下,组件也可以是原生 HTML 元素的形式,以 is 特性扩展。 组件component的注册全局组件: {{grocery.text}}'
})
var app7 = new Vue({
el:"#app7",data:{
groceryList:[
{"id":0,"text":"蔬菜"},{"id":1,"text":"奶酪"},{"id":2,"text":"其他"}
]
}
})
局部注册: A custom component! '
}
new Vue({
// ...
components: {
// DOM模板解析说明组件在某些HTML标签下会受到一些限制。 比如一下代码,在table标签下,组件是无效的。 ...
|
解决方法是,通过is属性使用组件
应当注意,如果您使用来自以下来源之一的字符串模板,将不会受限
JavaScript 内联模版字符串
.vue 组件data使用函数,避免多组件互相影响
html
js
',data: function () {
return data
}
})
new Vue({
el: '#example-2'
})
如上,div下有三个组件,每个组件共享一个counter。当任意一个组件被点击,所有组件的counter都会加一。
解决办法如下
js
这样每个组件生成后,都会有自己独享的counter。
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持编程之家。
(编辑:李大同)
【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容!