當前位置：首頁 >

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

發布時間：2024/9/27 32 豆豆

生活随笔收集整理的這篇文章主要介紹了（vue基础试炼_04）使用组件改造TodoList 小編覺得挺不錯的,現在分享給大家,幫大家做個參考.

接上一篇：（vue基礎試煉_03）使用vue.js實現TodoListhttps://gblfy.blog.csdn.net/article/details/103842233

指令說明

v-bind

傳入綁定值

文章目錄

一、前端頁面組件化
二、全局組件學習
三、局部組件學習

一、前端頁面組件化

頁面組件化：
簡單理解就是一個頁面可以劃分成幾個區域，一個區域就可以看作是一個組件，那整個頁面就相當于有很多組件拼接而成的，就像拼積木一樣，這樣，每個組件是細致的，也是容易維護的。

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

以前列表項是通過li標簽來顯示的

二、全局組件學習

下面把li標簽中的內容整體變成一個組件
在script標簽里面，我們調用一個Vue.component全局組件，在組件中定義模板和我們需要接收的參數的值，通過插值表達式渲染到頁面進行展示

<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>使用組件改造TodoList</title><script src="vue.js"></script> </head><body>  <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><script src="vue.js"></script> </head><body>  <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的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。

上一篇： Vue项目npm打包推荐方式
下一篇： vue项目使用sass-loader