• Vue 2.0——初识组件

    文章目录

    前言

    在VUE 2.X的 官方文档 中，针对组件有下面一段描述内容：

    组件系统是 Vue 的另一个重要概念，因为它是一种抽象，允许我们使用小型、独立和通常可复用的组件构建大型应用。

    通俗的说法就是：

    很多显示项，都能多个地方用同一种方式进行使用，无外乎只是传递数据不同而已，如：列表、下拉框等。
    将这些会被重复使用的代码，进行一个包装，定义成组件。
    需要使用时，只需要导入组件，传递对应的需要显示的数据信息，就能完成样式和数据的显示。
    不需要重复编写一样的代码！

    定义一个简单的组件

    依照官方文档中给出的案例，写一个自己的组件。

    Vue.component('todo-item',{
	template:'<li>这是个待办项</li>'
})

    • 1
    • 2
    • 3

    上面的代码就是将<li>这是个待办项</li>这段html代码进行定义为公共组件，同时起名为todo-item。

    使用也很简单，只需要两步：

    • 1、使用定义的组件别名进行样式编写。
    • 2、定义VUE 实例对象。

      定义实例对象这是重点，因为组件是依据VUE而生，无VUE实例不起效！

    格局要求，编写下列代码，进行组件的使用：

    <!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<!-- 组件1 -->
		<ol id="app-6">
			<!-- 这里的 <todo-item>，其实就是 组件别名称 -->
			<todo-item></todo-item>
		</ol>
	</body>
	<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
	<script>
		// ================ 组件1 ================
		Vue.component('todo-item',{
			template:'<li>这是个待办项</li>'
		})
		
		// 哪里用到组件，哪个容器就必须注册 new Vue()
		new Vue({
			el:"#app-6"
		})
	</script>
</html>

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22
    • 23
    • 24
    • 25
    • 26

    在这里插入图片描述
    使用组件，类似v-html方式，将组件代码动态渲染至指定的标签容器中，这里的容器就是<ol>。

    定义可传参数的组件

    组件只能写固定代码吗？

    当然不是！

    接下来，写一个可以传递参数的组件。

    首先依旧是定义一个组件：

    Vue.component('todo-for',{
	// 组件现在接受一个 prop，类似于一个自定义 attribute。
	// 1、只允许小写，不能出现大写，相当于就是一个变量
	// 2、注意这里是  props，写 prop 不会识别
	// 3、这里的名称可以任意定，但必须与v-bind中的对应
	props:['xjdata','xjindex'],
	template:'<li>{{ xjdata.text }}---{{xjindex}}</li>'
})

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8

    上面定义的组件中，可以传递两个参数信息xjdata、xjindex。

    有了组件，接下来就进行组件的使用：

    可以使用v-bind指令将待办项传到循环输出的每个组件中。

    <ol id="app-61">
	<todo-for
		v-for="(item,index) in groceryList"
		v-bind:xjdata='item'
		v-bind:xjindex='index'
		v-bind:key='item.id'
	></todo-for>
</ol>

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8

    完整代码如下所示：

    <!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<!-- 组件1 -->
		<ol id="app-6">
			<todo-item></todo-item>
		</ol>
		<!-- 组件2 -->
		<ol id="app-61">
			<todo-for
				v-for="(item,index) in groceryList"
				v-bind:xjdata='item'
				v-bind:xjindex='index'
				v-bind:key='item.id'
			></todo-for>
			
			<!-- <todo-for
				v-for="item in groceryList"
				v-bind:todo="item"
				v-bind:key="item.id"
			></todo-for> -->
			
			<!-- <todo-item></todo-item> -->
		</ol>
	</body>
	<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
	<script>
		// ================ 组件1 ================
		Vue.component('todo-item',{
			template:'<li>这是个待办项</li>'
		})
		
		// 哪里用到组件，哪个容器就必须注册 new Vue()
		new Vue({
			el:"#app-6"
		})
		
		// =============== 组件2 ================
		Vue.component('todo-for',{
			// 组件现在接受一个 prop，类似于一个自定义 attribute。
			// 1、只允许小写，不能出现大写，相当于就是一个变量
			// 2、注意这里是  props，写 prop 不会识别
			// 3、这里的名称可以任意定，但必须与v-bind中的对应
			props:['xjdata','xjindex'],
			template:'<li>{{ xjdata.text }}---{{xjindex}}</li>'
		})
		new Vue({
			el:'#app-61',
			data: {
			    groceryList: [
			      { id: 0, text: '蔬菜' },
			      { id: 1, text: '奶酪' },
			      { id: 2, text: '随便其它什么人吃的东西' }
			    ]
			  }
		})
	</script>
</html>

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22
    • 23
    • 24
    • 25
    • 26
    • 27
    • 28
    • 29
    • 30
    • 31
    • 32
    • 33
    • 34
    • 35
    • 36
    • 37
    • 38
    • 39
    • 40
    • 41
    • 42
    • 43
    • 44
    • 45
    • 46
    • 47
    • 48
    • 49
    • 50
    • 51
    • 52
    • 53
    • 54
    • 55
    • 56
    • 57
    • 58
    • 59
    • 60
    • 61
    • 62

    在这里插入图片描述

  • 相关阅读:
    vue3探索——5分钟快速上手大菠萝pinia
    现在学编程还有出路吗？程序员的出路在哪里？
    ICMP协议(二)
    C语言中的异常处理机制是什么？
    大学生HTML个人网页作业作品：基于html css实现围棋网页（带报告4800字）
    java毕业设计—— 基于java+javaEE+jsp的项目管理系统设计与实现（毕业论文+程序源码）——项目管理系统
    HCIA4.26-5.10
    瑞_23种设计模式_中介者模式
    护眼灯和白炽灯哪个更保护眼睛？推荐真正护眼的护眼灯
    【论文阅读】 Dimensionality reduction for large-scale neural recordings
  • 原文地址：https://blog.csdn.net/qq_38322527/article/details/125521677