vue组件怎么写,vue组件介绍
一、组件化思想
如果我们将一个页面中所有的处理逻辑全部放在一起,处理起来就会变得非常复杂,而且不利于后续的管理以及扩展。但我们将一个页面拆分成一个个小的功能块,每个功能块完成属于自己这部分独立的功能,那么之后整个页面的管理和维护就变得非常容易了。
因此:我们将一个完整的页面分为很多个组件,每个组件都用于实现页面的一个功能块,而每一个组件又可以进行细分。
组件化是Vue.js中的重要思想,它提供了一种抽象,让我们可以开发出一个个独立可复用的小组件来构造我们的应用。任何应用都会被抽象成一颗组件树。
有了组件化的思想,我们在之后的开发中就要充分的利用它。
尽可能的将页面拆分成一个个小的、可复用的组件。
这样让我们的代码更加方便组织和管理,并且扩展性也更强
组件:为了拆分Vue实例的代码量,能够让我们以不同的组件来划分不同的功能模块。
二、组件的使用分为三个步骤:
创建组件构造器
注册组件
使用组件
<div id="app"> <!-- 3、使用组件 --> <my-com></my-com></div><script> // 1、创建组件构造器 const myComponent = Vue.extend({ template: ` <div> <h2>组件标题</h2> <p>我是组件中的一个段落内容</p> </div> `, }) // 2、注册组件,并且定义组件标签的名称 Vue.component("my-com", myComponent) var vm = new Vue({ el: "#app", })</script>
1、Vue.extend():
调用Vue.extend()创建的是一个组件构造器。
通常在创建组件构造器时,传入template代表我们自定义组件的模板。
该模板就是在使用到组件的地方,要显示的HTML代码。
事实上,这种写法在Vue2.x文档中基本看不到了,它会直接使用下面语法糖
2、Vue.component():
调用Vue.component()是将刚才的组件构造器注册为一个组件,并且给它起一个组件的标签名称。
因此需要传入两个参数:a、注册组件的标签名,b、组件构造器
3、组件必须挂载在某个Vue实例下,否则不会生效
三、全局组件:
1、Vue.component('组件名称',创建出来的组件模板对象)
第一个参数:组件的名称,将来在引用的时候,就是以一个标签的形式来引入
第二个参数:Vue.extend创建出来的组件,其中template就是组件将来要展示的HTML内容
本文地址:百科问答频道 https://www.neebe.cn/wenda/903499.html,易企推百科一个免费的知识分享平台,本站部分文章来网络分享,本着互联网分享的精神,如有涉及到您的权益,请联系我们删除,谢谢!