超详细Vue组件化开发（一）

最新推荐文章于 2024-08-09 07:00:33 发布

qq_39586440

最新推荐文章于 2024-08-09 07:00:33 发布

阅读量473

点赞数 1

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

本文链接：https://blog.csdn.net/qq_39586440/article/details/110206504

版权

本文介绍了Vue组件化的概念及其优势，包括组件的基础知识，如注册与使用组件、全局与局部组件、父组件与子组件的关系，以及组件模板的分离写法和组件的data、methods属性。通过示例代码展示了组件的创建和使用过程。

摘要由CSDN通过智能技术生成

一、什么是组件、为什么使用组件？

把整个页面划分为一个个小的模块，这些模块共同完成整个页面的功能，这些小模块就是组件。图片左侧是组件示意图，这个页面由多个组件构成，有的组件内部还包含多个组件。例如，你可能会有页头、侧边栏、内容区等组件，每个组件又包含了其它的像导航链接、博文之类的组件。右侧是组件的组织形式，组件树。使用组件开发工程，可以帮助我们管理，组件的可复用性提高了开发效率。
在这里插入图片描述

二、组件基础

1.注册并使用组件

共有三个步骤：
1、创建组件构造器Vue.extend
2、注册组件Vue.component
3、在vue实例作用域内使用组件

代码如下（示例）：

<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8" />
		<meta name="viewport" content="width=device-width, initial-scale=1.0" />
		<title>组件化的基本使用</title>
		<script src="../vue/vue.js" type="text/JavaScript" charset="utf-8"></script>
	</head>
	<body>
		<div id="app">
			<!--3、使用组件-->
			<my-cpn></my-cpn>
			<my-cpn></my-cpn>
			<button-counter></button-counter>
		</div>

		<script>
			/**
			 *组件化使用步骤（原生版本）
			 *1、创建组件构造器对象
			 *2、注册组件
			 *3、在vue实例作用域内使用组件
			 */

			// 1、构造器
			const componentConstructor = Vue.extend({
    
				template: `
					<div>
						<h2>我是标题</h2>
						<p>我是内容，组件一</p>
						<p>我是组件二</p>
					</div>
					`,
			});

			// 2、注册组件
			Vue.component("my-cpn", componentConstructor);

			const app = new Vue({
    
				el: "#app",
				data: {
    },
			});
		</script>
	</body>
</html>

2.全局组件和局部组件

组件注册的地方不同，可分为全局组件和局部组件。局部组件在Vue对象内部的components属性下注册。

代码如下（示例）：

<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8" />
		<meta name="viewport" content="width=device-width, initial-scale=1.0" />
		<title>全局组件和局部组件</title>
		<script src="../vue/vue.js" type="text/JavaScript" charset="utf-8"></script>
	</head>
	<body>
		<div id="app">
			<!--3、使用组件-->
			<my-cpn></my-cpn>
			<my-cpn>

最低0.47元/天解锁文章

qq_39586440

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
超详细Vue组件化开发（一）

Vue学习笔记一、什么是组件、为什么使用组件？二、组件基础1.注册并使用组件2.读入数据总结一、什么是组件、为什么使用组件？把整个页面划分为一个个小的模块，这些模块共同完成整个页面的功能，这些小模块就是组件。图片左侧是组件示意图，这个页面由多个组件构成，有的组件内部还包含多个组件。右侧是组件的组织形式，组件树。使用组件开发工程，可以帮助我们管理，组件的可复用性提高了开发效率。二、组件基础1.注册并使用组件代码如下（示例）：<script> 2.读入数据代码如下（示例）：
复制链接

扫一扫