简单组件讲解

  在编程阶段,会遇到有些页面的某一区域的布局或数据显示类似;那么我们就可以复用这一段代码;在使用原生JS编程时,我们习惯是将代码抽出来自成一个文件,需要时引入即可。而在vue中也存在这样一个模块,可以简便的将可复用的代码抽成一个模块,这个就是组件。

  在很多人看来,组件是vue.js最强大的功能之一,组件是一个自定义元素或可以称为一个模块,包含了需要的模板(html)、逻辑(js)和样式(css);也就是说是一个包含了html,JS,css的模块;它有全局和局部之分。

  先看一个简单的例子:

       

  页面显示:

  

        全局组件:

  

    组件的特点:标准,分治,重用,组合

  注意事项:

    组件中的data必须是一个函数,参数以返回一个对象的显示

    组件中只能有一个根标签,也就是说html只能有一个最外层标签,必须是爸爸,不能有多个兄弟在最外层

    组件具有一定的独立性,组件与组件是封闭的,无法进行通信,也就是没办法传递参数     

  组件与组件之间如何通信传参请看下回分解~~
posted @ 2022-09-29 20:14  啊呀阿鱼呀  阅读(46)  评论(0)    收藏  举报