當前位置：首頁 > 前端技术 > vue >内容正文

vue

（vue基础试炼_05）简单组件之间的传值

發布時間：2024/9/27 vue 23 豆豆

生活随笔收集整理的這篇文章主要介紹了（vue基础试炼_05）简单组件之间的传值小編覺得挺不錯的,現在分享給大家,幫大家做個參考.

接上一篇：（vue基礎試煉_04）使用組件改造TodoListhttps://gblfy.blog.csdn.net/article/details/103844256

文章目錄

一、上篇回顧
- ① 代碼欣賞
- ② 代碼分析
二、子組件如何向父組件傳值呢？
- ① 需求案例文檔
- ② 需求案例效果圖
- ③ 思考與思路
- ④ 頁面驗證是否生效
三、刪除與數據
- ① 點擊對應的內容，然后刪除，又應該怎樣做呢？
- ② 刪除思路
- ③ 模擬刪除
- ④角標刪除
- ⑥ 父子傳值總結
- ⑦ 指令簡寫

一、上篇回顧

① 代碼欣賞

<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>使用組件改造TodoList</title><script src="vue.js"></script> </head><body>  <div id="root"><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: '#root',/*通過對象來注冊局部組件TodoItem*/components: {TodoItem: TodoItem},data: {list: [],inputValue: ''},methods: {handleBtnClick: function () {this.list.push(this.inputValue)this.inputValue = ''}}}); </script> </body> </html>

② 代碼分析

序號說明

①	最外層的父組件就是Vue實例
②	id等于root的div內容，其實就是最外層Vue實例父組件的模板
③	我們創建了一個子組件TodoItem子組件
④	通過todo-item標簽的形式，使用了這個子組件
⑤	父組件給子組件傳值

通過上一篇，大家已經學會了父組件給子組件傳值這種方式。
通過v-bind指令將list循環出來的每一項的值item，借助content變量傳遞todo-tem子組件，子組件通過 props: [‘content’],來接收父組件傳遞過來的參數值，最后，在模板中通過插值表達式渲染到頁面上進行展示！

二、子組件如何向父組件傳值呢？

① 需求案例文檔

點擊列表中的任意一項，進行數據刪除

② 需求案例效果圖

③ 思考與思路

這個需求中涉及到了子組件向組件傳值的相關知識點了
既然是在子組件中點擊內容做的操作，那就給子組件綁定一個事件，當點擊事件時，在做邏輯操作即可。

步驟說明

①	在子組件中綁定一個handleItemClick
②	在子組件的methods下面寫handleItemClick 的方法

④ 頁面驗證是否生效

三、刪除與數據

① 點擊對應的內容，然后刪除，又應該怎樣做呢？

② 刪除思路

數據在哪存放著呢？父組件的list數組中，父組件決定子組件顯示多少個，所以，刪除子組件的時候，我們需要點擊子組件，子組件把對應的內容傳給父組件，讓父組件去改變數據，父組件的數據改變了，子組件就會減少或者增加，那具體應該怎樣操作呢？
子組件向父組件傳值，我們通過this.$emit('delete')向外觸發事件

簡述：當我點擊子組件時，子組件向外觸發一個delete事件，那么，我在父組件里面，創建子組件的同時，可以監聽這個delete事件。

一旦刪除事件被觸發的時候，就會執行父組件中的handleItemDelete這個方法，因此，我們需要在父組件的methods中定義handleItemDelete這個方法。

③ 模擬刪除

下面，我們需要做的就是改變list中的數據即可
先讓list等于空數組

<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>使用組件改造TodoList</title><script src="vue.js"></script> </head><body>  <div id="root"><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"@delete="handleItemDelete"></todo-item></ul> </div><script>/*創建一個局部組件 TodoItem*/var TodoItem = {props: ['content'],template: "<li @click='handleItemClick'>{{content}}</li>",methods: {handleItemClick: function () {// alert('click')this.$emit('delete');}}}/*創建了一個vue實例*/var app = new Vue({el: '#root',/*通過對象來注冊局部組件TodoItem*/components: {TodoItem: TodoItem},data: {list: [],inputValue: ''},methods: {handleBtnClick: function () {this.list.push(this.inputValue)this.inputValue = ''},handleItemDelete: function () {// alert('click');this.$data.list = []}}}); </script> </body> </html>

④角標刪除

刪除是實現了但是，刪除了所有，那怎樣刪除指定的內容呢？如果獲取內容的角標就好了，我們就可以根據角標刪除。
當父組件箱子組件傳值的時候，不能只傳content，在傳一個內容的下標，在子組件中再添加一個下標index，等會作為刪除的角標；當父組件傳遞下標時也許要在子組件中接收。

<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>使用組件改造TodoList</title><script src="vue.js"></script> </head><body>  <div id="root"><div><input type="text" v-model="inputValue"><button v-on:click="handleBtnClick">提交</button></div><ul><todo-item v-bind:content="item"v-bind:flag="index"v-for="(item,index) in list"@delete="handleItemDelete"></todo-item></ul> </div><script>/*創建一個局部組件 TodoItem*/var TodoItem = {props: ['content', 'flag'],template: "<li @click='handleItemClick'>{{content}}</li>",methods: {handleItemClick: function () {// alert('click')this.$emit('delete', this.flag);}}}/*創建了一個vue實例*/var app = new Vue({el: '#root',/*通過對象來注冊局部組件TodoItem*/components: {TodoItem: TodoItem},data: {list: [],inputValue: ''},methods: {handleBtnClick: function () {this.list.push(this.inputValue);this.inputValue = ''},handleItemDelete: function (flag) {// alert(flag);// this.$data.list = []this.list.splice(flag, 1)}}}); </script> </body> </html>

⑥ 父子傳值總結

父組件給子組件傳值：通過v-bind借助變量給子組件傳值，子組件要在props中進行接收
子組件給父組件傳值：我們通過$emit向上觸發事件，子組件觸發的事件，父組件恰好在監聽，接收監控后，父組件就可以接收到子組件傳遞過來的內容，來實現子組件相符組件傳值的功能。

⑦ 指令簡寫

指令簡寫

v-on:	@
v-bind:	:

總結

以上是生活随笔為你收集整理的（vue基础试炼_05）简单组件之间的传值的全部內容，希望文章能夠幫你解決所遇到的問題。

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

上一篇：大家常用的 IDEA 插件大推荐，个个都
下一篇： html5倒计时秒杀怎么做,vue 设