vue组件化开发

最新推荐文章于 2024-07-16 15:41:21 发布

郭圆圈

最新推荐文章于 2024-07-16 15:41:21 发布

阅读量376

点赞数

分类专栏： vue.js 文章标签： vue

本文链接：https://blog.csdn.net/weixin_44225940/article/details/104126474

版权

vue.js 专栏收录该内容

5 篇文章 1 订阅

订阅专栏

什么是组件

简单理解：大问题拆分成小问题
在这里插入图片描述
组件化：将一个页面拆分成一个个小的功能块，每个功能块完成属于自己这部分独立的功能，使得整个界面的管理和维护变得容易。

vue的组件化思想：模块
提供一种抽象，开发出一个个独立可复用的小组件来构造应用。
任何的应用都会被抽象成一棵组件树。

注册组件的基本步骤

创建组件构造器Vue.extend({template:})
注册组件Vue.component（标签名，组件构造器）
使用组件Vue实例范围内

	<body>
		<div id="app">
			<my-cpn></my-cpn>
		</div>
	</body>
	<script>
		//ES6语法``定义字符串时可换行
		//1.创建组件构造器对象
		const cpnc = Vue.extend({
			template:`
			<div>
				<h2>标题我</h2>
				<p>现在我</p>
			</div>`//传入template定义组件模板
		})
		//2.注册
		Vue.component('my-cpn',cpnc)//构建自己的组件my-cpn
		//3.使用
		const app=new Vue({
			el:'#app'
		})
	</script>

组件的语法糖注册方式：

	<script>
		Vue.component('cnp2',{//全局组件
			template:`
			<div>
				<h2>标题我</h2>
				<p>现在kkk</p>
			</div>`
		})
		const app=new Vue({//局部组件
			el:'#app',
			components:{
				//cpn使用组件时的标签名
				'cpn':{
					template:`
					<div>
						<h2>标题我</h2>
						<p>现在kkk</p>
					</div>`
				}
			}
		})
	</script>

全局&局部

全局组件：可在多个Vue实例下使用
局部组件：在某个Vue实例下注册，属性：components

	<script>
		const app=new Vue({
			el:'#app',
			components:{
				//cpn使用组件时的标签名
				cpn:cpnC
			}
		})
	</script>

父组件&子组件

在父组件创造时声明嵌套子组件

	<script>
		const cpnC1 = Vue.extend({
			template:`
			<div>
				<h2>标题我</h2>
				<p>现在kkk</p>
			</div>`
		})
		const cpnc = Vue.extend({
			template:`
			<div>
				<h2>标题我</h2>
				<p>现在我</p>
			</div>`,
			components:{
				cpn1:cpnC1
			}
		})
	</script>

郭圆圈

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
vue组件化开发

什么是组件简单理解：大问题拆分成小问题组件化：将一个页面拆分成一个个小的功能块，每个功能块完成属于自己这部分独立的功能，使得整个界面的管理和维护变得容易。vue的组件化思想：模块提供一种抽象，开发出一个个独立可复用的小组件来构造应用。任何的应用都会被抽象成一棵组件树。注册组件的基本步骤创建组件构造器Vue.extend({template:})注册组件Vue.componen...
复制链接

扫一扫

专栏目录