vue.js：组件化的实现和使用过程

news2025/4/17 15:12:18

什么是组件化？

当我们遇到复杂问题的时候：

任何一个人处理信息的逻辑能力都是有限的
所以，当我们面对一个复杂的问题的时候，我们不可能一次性搞定处理掉一大堆内容
但是我们都会有问题拆解的能力
将一个复杂的问题拆解成很多小的问题处理，再将这些小问题放到整体中，这样很多问题都会迎刃而解了

Vue组件化思想

组件化是Vue.js中的一个重要的思想
- 它提供的是一种抽象，可以让我们开发一个个独立可复用的小组件来构造我们的应用。
- 任何一个组件都会被抽象为一棵树。

组件抽象为组件树
注册组件的基本步骤
组件的使用分为3个步骤：

创建组件构造器

const cpnC = Vue.extend({
  template:`
    <div>
      <h2>我是标题</h2>
      <p>我是内容：哈哈哈</p>
      <p>我是内容：呵呵呵</p>
    </div>
  `

在这里插入图片描述

注册组件

Vue.component('my-cpn',cpnC)

在这里插入图片描述

使用组件

<my-cpn></my-cpn>
<my-cpn></my-cpn>
<my-cpn></my-cpn>
<my-cpn></my-cpn>

在这里插入图片描述

需求：当有一块内容需要重复显示的时候就可以利用组件化的思想–>将一块内容重复显示4次

1.一般方法

<div>
  <h2>我是标题</h2>
  <p>我是内容：哈哈哈</p>
  <p>我是内容：呵呵呵</p>
</div>
<div>
  <h2>我是标题</h2>
  <p>我是内容：哈哈哈</p>
  <p>我是内容：呵呵呵</p>
</div>
<div>
  <h2>我是标题</h2>
  <p>我是内容：哈哈哈</p>
  <p>我是内容：呵呵呵</p>
</div>
<div>
  <h2>我是标题</h2>
  <p>我是内容：哈哈哈</p>
  <p>我是内容：呵呵呵</p>
</div>

2.组件化实现

<my-cpn></my-cpn>
<my-cpn></my-cpn>
<my-cpn></my-cpn>
<my-cpn></my-cpn>

完整代码

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<meta name="author" content="xiaonaihu" />
		<meta name="generator" content="HBuilder X" />
		<title>组件化的基本使用</title>
		<script src="../../lib/vue.min.js" type="text/javascript" charset="utf-8"></script>
	</head>
	<body>
		<div id="app">
			<!-- 3.使用组件 -->
			<my-cpn></my-cpn>
			<my-cpn></my-cpn>
			<my-cpn></my-cpn>
			<my-cpn></my-cpn>
		</div>
		<script type="text/javascript">
			// 1.创建组件的构造器对象
			const cpnC = Vue.extend({
				template:`
					<div>
						<h2>我是标题</h2>
						<p>我是内容：哈哈哈</p>
						<p>我是内容：呵呵呵</p>
					</div>
				`
			})
			// 2.注册组件
			Vue.component('my-cpn',cpnC)
			var app = new Vue({
				el: "#app",
				data:{
					message:"hello vue"
				}
			});
		</script>
	</body>
</html>