您好,欢迎来到伴沃教育。
搜索
您的当前位置:首页Vue - Component组件

Vue - Component组件

来源:伴沃教育

什么是组件?

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

所有的 Vue 组件同时也都是 Vue 的实例,所以可接受相同的选项对象 (除了一些根级特有的选项) 并提供相同的生命周期钩子。

任意的网页都可以切割成组件,可以迅速建立。


图片.png

使用组件

1.全局注册

我们知道,可以通过以下方式创建一个 Vue 实例:

new Vue({
  el: '#some-element',
  // 选项
})
 {
    // 选项
})

组件在注册之后,便可以作为自定义元素:

<my-component></my-component>

在一个模板中使用。请注意确保在初始化根实例之前注册组件。(上面就是注册组件的方式)

HTML:

<div id="example">
  <my-component></my-component>
</div>

JS:

 {
  template: '<div>A custom component!</div>'
})

// 创建根实例
new Vue({
  el: '#example'
})

将会渲染为:

<div id="example">
  <div>A custom component!</div>
</div>

eg:

 {
  template: '<div>A custom component!</div>'
}) // 注册:component

var example = new Vue({
  el:"#example",

})  // 实例化Vue

组件中,每个组件都有它对应的模板。

组件的操作:

1)定义组件。 
2)注册组件。

1)定义组件:
Vue.extend() # Vue继承创建组件。

var app_nav = Vue.extend({
  template: '<div>app_nav</div>'
})

注意:定义组件的时候,的template必须是最根部的tag,不能是多个。

template: '<div>123</div><div>456</div>'

这样的就是错误的。

2)注册组件

 app_nav)
 app_view)

组件等价:app-nav -> app_nav -> template( 也就是:<div>app_nav</div> )


Vue的组件,非常类似于自定义元素。它是Web组件规范的一部分。实际上Vue.js的组件语法参考了该规范。

Vue组件实现了Slot APIis 特性。但是,有几个关键的不同:

Web组件规范仍然远没有完成,并且没有浏览器实现。
相比之下,Vue.js组件不需要任何补丁,并且在所支持的浏览器(IE9 以及更高版本)之下表现一致。
必要的时候,Vue.js组件也可以放在原生自定义元素之内。

Vue.js组件提供了原生自定义元素所不具备的一些重要功能,比如组件间的数据流,自定义时间系统,以及动态的,带有特效的组件替换。

组件系统是使用Vue.js构建大型应用的基础。另外,Vue.js生态系统也提供了高级工具与多种支持库,它们和Vue.js一起构成了一个更加『框架』性的系统。

Copyright © 2019- bangwoyixia.com 版权所有 湘ICP备2023022004号-2

违法及侵权请联系:TEL:199 1889 7713 E-MAIL:2724546146@qq.com

本站由北京市万商天勤律师事务所王兴未律师提供法律服务