当前位置: 首页 > Web前端 > vue.js

Vue组件(一)全局局部语法糖差异分离写法

时间:2023-03-31 16:53:15 vue.js

如果Vue组件把所有的处理逻辑放在一个页面中,处理起来会变得很复杂,不利于后续的管理和扩展。但是如果我们把一个页面拆分成一个个小的功能块,每个功能块完成自己独立的功能,那么整个页面的管理和维护就变得更加容易了。Vue组件化思想组件化是Vue.js中一个重要的思想提供的抽象,使我们可以开发一个独立的、可重用的小组件来构建我们的应用程序。任何应用程序都会被抽象成一棵组件树。组件思想的应用有组件化的思想。开发完成后,页面会尽可能的拆分成小块。可重用组件这也让我们的代码更方便组织和管理,同时也更具可扩展性。组件的使用分为创建组件构造函数和注册组件三个步骤。使用组件Vue.component():调用Vue.component()是将刚才的组件构造函数注册为一个组件,并给它一个内置的标签名Vue.component(tagName,options)tagName是组件名,options是配置选项。示例基于//注册组件

//此时组件的内容为页面显示另一种写法
//此时组件内容显示在页面全局组件和本地componentglobalcomponent:意思是本地组件可以在多个Vue实例下使用:在一个实例中,可以使用components选项在本地注册组件,注册的组件只有在该实例作用下才有效//globalcomponent
//部分组件/my-cpn>
####父组件和子组件的区别如果子组件没有注册和使用,会报错。如果需要使用,需要在Vue实例对象中注册####父子组件的错??误用法:在Vue实例中以子标签的形式使用因为当子组件注册到父组件组件时,Vue会编译父组件的模块。模板的内容已经决定了父组件要渲染的HTML(相当于父组件中子组件中的内容)是类似的用法,只能在父组件中被识别,是注册组件的语法糖,会被浏览器忽略。之前注册和搭建的方式可能有点繁琐。为了简化这个过程,Vue提供了注册的语法糖。你可以直接使用一个对象来代替原来的全局组件:callextendconstcpnC=Vue.extend({template:`

Iamthesource

`})Vue.component('my-cpn',cpnC)constapp=newVue({el:'#app',data:{}})语法糖:虽然内部调用还是extend,但是很简单标签使用