vue自定义组件

最新推荐文章于 2023-06-23 16:57:19 发布

Angel楠楠

最新推荐文章于 2023-06-23 16:57:19 发布

阅读量591

点赞数

本文链接：https://blog.csdn.net/wangqiao666888/article/details/122887044

版权

一般都是用vue的项目，都是组件组件化的思想开发的，一般在搭建项目的时候，会先创建一个views目录和一个commen目录，和一个feature目录，views目录中放页面级的组件，commen中放公共的组件，比如head（头部），foot(公共底部组件)

首先，组件可以提升整个项目的开发效率，能够把页面抽象成多个相对独立的模块，解决了传统项目的开发，效率低，难维护，服用性低

使用组件的好处

组件是可以复用性的
易于维护
有封装性，易于使用
大型项目中降低组件之间的重复性

全局组件

引用全局组件my-header

<body>
  <div id="main1">
    <!-- 正常模板解析的时候，不会将自定义标签解读出来，而是将自己定义组件里的参数解读出来，也就是下面template中的h1标签 -->
    <my-header></my-header>
  </div>
   <div id="main2">
     <!-- 自定义组件具有复用性 -->
    <my-header></my-header>
  </div>
   <div id="main3">
    <my-header></my-header>
  </div>
</body>

2.注册全局组件my-header

//全局组件：在任何地方，任何方式，任何地点都可以使用的标签组件
vue.component("my-header", {
    	// h1标签是我们在自定义主键里面写的参数的标签
    	template: '<h1>标题{{msg}}</h1>',
    	data(){
    	   return {msg:100}
    	}
    })
	new Vue({
	  	el: '#main'
	  });
	  new Vue({
	  	el: '#main2'
	  });
	  new Vue({
	  	el: '#main3'
	  });

3.局部组件
局部组件：他只在规定的范围内才会生效

Angel楠楠

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
vue自定义组件

一般都是用vue的项目，都是组件组件化的思想开发的，一般在搭建项目的时候，会先创建一个views目录和一个commen目录，和一个feature目录，views目录中放页面级的组件，commen中放公共的组件，比如head（头部），foot(公共底部组件)首先，组件可以提升整个项目的开发效率，能够把页面抽象成多个相对独立的模块，解决了传统项目的开发，效率低，难维护，服用性低使用组件的好处组件是可以复用性的易于维护有封装性，易于使用大型项目中降低组件之间的重复性全局组件引用全局组件my-h
复制链接

扫一扫