（vue基础试炼_04）使用组件改造TodoList

接上一篇：（vue基础试炼_03）使用vue.js实现TodoListhttps://gblfy.blog.csdn.net/article/details/103842233

指令	说明
v-bind	传入绑定值

在这里插入图片描述

文章目录

一、前端页面组件化
二、全局组件学习
三、局部组件学习

一、前端页面组件化

页面组件化：
简单理解就是一个页面可以划分成几个区域，一个区域就可以看作是一个组件，那整个页面就相当于有很多组件拼接而成的，就像拼积木一样，这样，每个组件是细致的，也是容易维护的。

在TodoList例子中，列表就可以看作是一个组件。

以前列表项是通过li标签来显示的

<li v-for="item in list">{{item}}</li>

二、全局组件学习

下面把li标签中的内容整体变成一个组件
在script标签里面，我们调用一个Vue.component全局组件，在组件中定义模板和我们需要接收的参数的值，通过插值表达式渲染到页面进行展示
在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>使用组件改造TodoList</title><!--引入vue.js库--><script src="vue.js"></script>
</head><body>
<!--vue接管的div-->
<div id="app"><div><input type="text" v-model="inputValue"><button v-on:click="handleBtnClick">提交</button></div><ul><todo-item v-bind:content="item"v-for="item in list"></todo-item></ul>
</div><script>Vue.component("TodoItem", {props: ['content'],template: "<li>{{content}}</li>"});/*创建了一个vue实例*/var app = new Vue({el: '#app',data: {list: [],inputValue: ''},methods: {handleBtnClick: function () {this.list.push(this.inputValue)this.inputValue = ''}}});
</script>
</body>
</html>

在这里插入图片描述

我们把list循环出的每一个值都赋值给item，然后，再把item通过v-bind指令传给todo-item标签，怎么传呢？通过content这个变量来传递。
子组件(todo-item)传递值给父组件，那父组件如何接收呢？
在父组件中添加 props: ['content'],来接收子组件传递过来的参数内容。
在这里插入图片描述
这样的话子组件中就可以接收外部传递过来content参数值，而content的值就是item，而item就是list通过循环出来的每一项，所以，子组件就接收到了list数组中的每一项的值item。
子组件接收到的content值，需要在模板(template)li标签中通过插值表达式，渲染出来展示到页面中。

梳理逻辑：
首先我定义了一个组件叫TodoItem，然后呢，这是一个全局的组件，直接可以在我们的模板中使用这个组件todo-item，怎样使用这个组件呢？
我们通过list来决定到底循环多少个todo-item这个组件，同时，把每一个list的每一项的内容，通过v-bind的语法借助content这个变量，擦混递给了todo-item这个组件，而如果你想使用父组件传递过来的数据，需要在props中对content进行接收，接收完成后，我们的模板中用到了content，然后组件就会将这个content渲染出来。

三、局部组件学习

使用局部组件实现上面案例

序号	说明
①	创建一个局部组件
②	将局部组件以对象的形式在Vue实例的components里面进行注册即可

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>使用组件改造TodoList</title><!--引入vue.js库--><script src="vue.js"></script>
</head><body>
<!--vue接管的div-->
<div id="app"><div><input type="text" v-model="inputValue"><button v-on:click="handleBtnClick">提交</button></div><ul><todo-item v-bind:content="item"v-for="item in list"></todo-item></ul>
</div><script>/*创建一个局部组件 TodoItem*/var TodoItem = {props: ['content'],template: "<li>{{content}}</li>"}/*创建了一个vue实例*/var app = new Vue({el: '#app',/*通过对象来注册局部组件TodoItem*/components: {TodoItem: TodoItem},data: {list: [],inputValue: ''},methods: {handleBtnClick: function () {this.list.push(this.inputValue)this.inputValue = ''}}});
</script>
</body>
</html>