欢迎访问 生活随笔！
TAG聚合

生活随笔

当前位置： 首页 > 前端技术 > vue >内容正文

vue

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

发布时间：2024/9/27 vue 33 豆豆
生活随笔 收集整理的这篇文章主要介绍了 （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>

下一篇：（vue基础试炼_05）简单组件之间的传值https://blog.csdn.net/weixin_40816738/article/details/103845363

总结

以上是生活随笔为你收集整理的（vue基础试炼_04）使用组件改造TodoList的全部内容，希望文章能够帮你解决所遇到的问题。

如果觉得生活随笔网站内容还不错，欢迎将生活随笔推荐给好友。