组件化实现简单的toDoList

最新推荐文章于 2024-04-24 19:49:08 发布

东陵十三

最新推荐文章于 2024-04-24 19:49:08 发布

阅读量691

点赞数 1

分类专栏：计算机开发前端文章标签： Vue2.6 全局组件局部组件

本文链接：https://blog.csdn.net/donglingjiu/article/details/100291151

版权

计算机同时被 3 个专栏收录

110 篇文章 0 订阅

订阅专栏

开发

73 篇文章 0 订阅

订阅专栏

前端

9 篇文章 0 订阅

订阅专栏

组件化将一个页面根据功能分解成多块，每一块定义成一个组件，页面分别引入这些组件。

如此一来修改维护页面功能的时候直接定位到相应组件文件。

每一个组件其实就是一个Vue实例组件化其实就是实例化，页面由多个Vue实例组成

全局组件
Vue.component Vue提供的创建全局组件

v-bind 向子组件传入绑定值

遍历list的时候将每一项的值赋值给item 把item值通过v-bind绑定到变量 content上传递给to-do-list组件

<!DOCTYPE html>
<html>
	<head>
		<title>toDoList</title>
		<meta charset="UTF-8" />

		<script src="./vue.js"></script>
	</head>

	<body>
		<div id="app">
			<input type='text' v-model="inputValue"/>
			<button @click="handleBtnClick">submit</button>
			<ul>
				<!-- <li v-for="item in list">{{item}}</li> 
                                    之前的思路 循环列表项 li标签实现  
                                    目前 可以将li封装成模板  抽取成组件

                                    to-do-list组件名称 对应下方的创建组件起的名称ToDoList
                                    驼峰命名 拆分时侯 根据大小写 -分割

                                    to-do-list组件 相对于外层容器来说是子组件 通过v-bind向子组件传入 绑定值   
				-->
				<to-do-list v-bind:content="item" 
							v-for="item in list">
				</to-do-list>
			</ul>
		</div>


		<script>
                        <!-- Vue.component Vue提供的 创建全局组件  -->
			Vue.component('ToDoList',{
				props:['content'],//props定义从父组件接收的参数
				template:"<li>{{content}}</li>"   //创建模板  模板中使用插值表达式渲染变量
			}) ;

			var app = new Vue({
				el: "#app" ,
				data: {
					list:[] ,
					inputValue:''
				},
				methods:{
					handleBtnClick:function() {
						this.list.unshift(this.inputValue) ;
						this.inputValue = '' ;
					}
				}
			})
		</script>
	</body>
</html>

局部组件

       var ToDoItem = {
               props:['content'] ,
               template:"<li>{{content}}</li>"
        }需要在实例中通过conpoments中注册

<!DOCTYPE html>
<html>
	<head>
		<title>toDoItem</title>
		<meta charset="UTF-8" />

		<script src="./vue.js"></script>
	</head>

	<body>
		<div id="app">
			<input type="text" v-model="inputValue"/>
			<button @click="handleBtnClick">submit</button>
			<ul>
				<to-do-item v-bind:content="item" 
							v-for="item in list">
					
				</to-do-item>
			</ul>
		</div>

		<script>
                        <!-- 定义局部组件  -->
			var ToDoItem = {
				props:['content'] ,
				template:"<li>{{content}}</li>"
			} 

			var app = new Vue({
				el:'#app' ,
                                // 在实例中定义组件
				components:{
					ToDoItem:ToDoItem 
				},
				data:{
					list:[] ,
					inputValue:''
				},
				methods:{
					handleBtnClick:function() {
						this.list.unshift(this.inputValue) ;
						this.inputValue = '' ;
					}
				}
			}) 
		</script>
	</body>
</html>