1. 程式人生 > >vue2.0 子元件和父元件之間的傳值(轉載)

vue2.0 子元件和父元件之間的傳值(轉載)

Vue是一個輕量級的漸進式框架,對於它的一些特性和優點在此就不做贅述,本篇文章主要來探討一下Vue子父元件通訊的問題

首先我們先搭好開發環境,我們首先得裝好git和npm這兩個工具(如果有不清楚的同學請自行百度哦)

環境搭建步驟:

  • 開啟git ,執行 npm install --global vue-cli 這是安裝vue的命令列
  • vue init webpack vue-demo 這是vue基於webpack的模板專案
  • cd vue-demo 進入vue-demo資料夾
  • npm install 安裝package.json中依賴的node_modules
  • npm run dev 執行該專案
剛剛我們建立的是vue基於webpack工具的一個模板專案,對於webpack和熱載入這些不熟悉的同學不必在意,我們現在不會過多關注webpack的,不過建議對vue有興趣的同學還是去了解一下webpack,它也算是vue開發中的一個必備工具
接著我們進入Demo,首先我們可以刪除掉模板專案中src/components/Hello.vue,然後在App.vue中刪除對於Hello子元件的註冊和使用還有一些其他無關緊要的東西,此時的App.vue應為這樣

App.png
一.父元件向子元件傳值

1.建立子元件,在src/components/資料夾下新建一個Child.vue
2.Child.vue的中建立props,然後建立一個名為message的屬性


child.png


3.在App.vue中註冊Child元件,並在template中加入child標籤,標籤中新增message屬性並賦值


App2.png


4.儲存修改的檔案,檢視瀏覽器


browser.png


5.我們依然可以對message的值進行v-bind動態繫結


App3.png


此時瀏覽器中


browser2.png

父元件向子元件傳值成功
總結一下:

  • 子元件在props中建立一個屬性,用以接收父元件傳過來的值
  • 父元件中註冊子元件
  • 在子元件標籤中新增子元件props中建立的屬性
  • 把需要傳給子元件的值賦給該屬性
二.子元件向父元件傳值

1.在子元件中建立一個按鈕,給按鈕繫結一個點選事件


Child2.png


2.在響應該點選事件的函式中使用$emit來觸發一個自定義事件,並傳遞一個引數


Child3.png


3.在父元件中的子標籤中監聽該自定義事件並新增一個響應該事件的處理方法


App4.png


4.儲存修改的檔案,在瀏覽器中點選按鈕


browser3.png

子元件向父元件傳值成功
總結一下:

  • 子元件中需要以某種方式例如點選事件的方法來觸發一個自定義事件
  • 將需要傳的值作為$emit的第二個引數,該值將作為實參傳給響應自定義事件的方法
  • 在父元件中註冊子元件並在子元件標籤上繫結對自定義事件的監聽
在通訊中,無論是子元件向父元件傳值還是父元件向子元件傳值,他們都有一個共同點就是有中間介質,子向父的介質是自定義事件,父向子的介質是props中的屬性。抓準這兩點對於父子通訊就好理解了

相關推薦

vue2.0 元件元件之間轉載

Vue是一個輕量級的漸進式框架,對於它的一些特性和優點在此就不做贅述,本篇文章主要來探討一下Vue子父元件通訊的問題 首先我們先搭好開發環境,我們首先得裝好git和npm這兩個工具(如果有不清楚的同學請自行百度哦) 環境搭建步驟: 開啟git ,執行 npm install --global vue-cl

Vue2.0問題總結—在元件中無法渲染元件的問題

最近剛入門Vue2.0,準備跟著文件寫demo,由於自己的粗心導致出現的一些問題,在這裡總結下。 先貼下我的VSCode中Vue快速新增的通用程式碼模板: "Print to console": { "prefix": "vue",

React中子元件元件之間

最近公司的專案在用react,所以才開始接觸react,react和vue一樣,都是元件化的框架,那麼子元件和父元件之間怎麼傳值呢? 父元件向子元件傳值 ,父元件通過屬性的形式向子元件傳遞引數,子元件

RN中子元件元件之間的資料傳遞問題

使用RN做專案已經有兩個月了,雖然現在大部分情況下已經使用了Redux,進行狀態的管理和資料的處理,後續會說一下自己是如何使用Redux的,現在先說一下在RN中一個關鍵的資料傳遞問題,雖然後續可能專案中添加了Redux架構,但也不代表這每個頁面都去使用,畢竟為了

QT 視窗視窗之間傳輸資料

子窗體類中定義: signals: void sendMapValue(QStringList); //傳送訊號 傳遞資訊 QStringList為引數型別 父視窗中定義: private slots: void receiveMapValue(QStringList)

Vue2.0 + ElementUI 手寫許可權管理系統後臺模板——元件結尾

i18n國際化多語言翻譯使用 框架採用vue-i18n版本 8.4.0, 使用npm安裝 新建資料夾src/i18n,目錄如下 i18n.js //i18n.js import Vue from 'vue' import locale from 'element-ui/lib/loc

關於之間的方法,構造方法呼叫關係

子類繼承了父類之後,父類的所有方法都可以被子類呼叫,父類的所有(除私有外)方法都可以被重寫; 但是父類中私有資料域不能在子類中被修改,只能通過呼叫父類的公共修改方法來修改; 例如下面圓幾何繼承了簡單幾何: 以上幾點說明: 簡單幾何類中的構造方法其實不需要寫,因

Asp.Net Core MVC控制器視圖之間

view 指定 mode 設置 http adg nbsp urn 傳值方式 一、Core MVC中控制器和視圖之間傳值方式和Asp.Net中非常類似 1.弱類型數據:ViewData,ViewBag 2.強類型數據:@model 二、代碼 實例 1.ViewData

TCP/IPUDP之間的區別轉載

有用 可靠性 client 之間 可靠的 col 因此 用戶數據報 ack 在分析兩者之間的區別之前,我們先搞清楚這兩者的關系, TCP/IP協議簇 是一種網絡控制協議,簡單點說就是一種網絡協議,我們網絡中的計算機就是通過這套協議簇來進行數據通信的。這套協議簇裏面包含了很

vue插槽,也就是頁面、頁面相互的另一寫法

style def com data component rop 頁面 ret slot 父頁面: <template> <div class="parent"> <p>父組件</p> <child> &l

基於vue2.0實現仿百度前端分頁效果

前言 上篇文章中,已經使用vue實現前端分頁效果,這篇文章我們單獨將分頁抽離出來實現一個分頁元件 先看實現效果圖 程式碼實現 按照慣例,我們在凍手實現的時候還是先想一想vue實現元件的思路 1、需要提前設定哪些引數需要暴露出來給父元件傳遞 <Paging

【音樂App】—— Vue2.0開發移動端音樂WebApp專案爬坑

前言:上一篇總結了專案概況、專案準備、頁面骨架搭建、推薦頁面開發,這一篇重點梳理歌手頁面開發、歌手詳情頁。專案github地址:https://github.com/66Web/ljq_vue_music,歡迎Star。   一、歌手頁面開發--singer

【音樂App】—— Vue2.0開發移動端音樂WebApp專案爬坑

前言:在學習《慕課網音樂App》課程的過程中,第一次接觸並實踐了資料的跨域抓取和圍繞音樂播放展開的不同功能,也是這個專案帶給我最大的收穫,前面的實踐記錄分別總結了:推薦頁面開發和歌手頁面開發。這一篇主要梳理一下:音樂播放器的開發。專案github地址:https://github.com/66Web/ljq_

ROS影象OpenCV影象之間的轉換C ++

1.概念 ROS以自己的sensor_msgs / Image訊息格式傳遞影象,但許多使用者希望將影象與OpenCV結合使用。 CvBridge是一個ROS庫,提供ROS和OpenCV之間的介面。 在本教程中,您將學習如何編寫使用CvBridge將ROS影象轉換為O

自己寫個activex控制元件,如何知道他的classid轉載

在網頁裡用的時候需要知道他的classid我在程式碼中看到有 const GUID CDECL BASED_CODE _tlid = { 0x89201950, 0x2CAC, 0x4CF7, { 0x99, 0x8, 0x73, 0x38, 0x61, 0x41, 0xEF, 0xD2 }

PythonR語言之間的抉擇

在資料分析流行的開始,我們已經看到了資料分析的日後很好的發展前景,通過資料分析我們可以做好企業的規劃以及發現企業自身存在的問題。同時,資料分析行業的薪資待遇都是很好的。正因為如此,很多人開始學習資料分析知識,但是資料分析是需要學習程式設計知識的,而程式設計知識中有Python和R語言,那麼大家知道不知道這

PHP實現一個簡單的計算器在html頁面php檔案之間

先一個小案例簡單說明一下,從html頁面提交的資料如何傳給另一個php檔案。 先是一個簡單的html頁面: <html> <body> <form action="test1.php" method="post">

JMeter3.0圖形化HTML報告中文亂碼問題處理轉載

ada zip 分析 需要 ted 原因 charsets 直接下載 行處理 由於個人在JMeter 3.0的實際應用中,腳本中的Test Plan/Sampler等元件命名都沒有使用中文,所以在之前介紹Dashboard Report特性的博客(原文戳這裏))成文時,沒有

JAVA多線程並發基礎面試問答轉載

響應 弱一致性 tac reads 接口 快速 本地變量 但是 notify                     JAVA多線程和並發基礎面試問答   原文鏈接:http://ifeve.com/java-multi-threading-concurrency-in

虛擬函式純虛擬函式的區別轉載

首先:強調一個概念定義一個函式為虛擬函式,不代表函式為不被實現的函式。定義他為虛擬函式是為了允許用基類的指標來呼叫子類的這個函式。定義一個函式為純虛擬函式,才代表函式沒有被實現。定義純虛擬函式是為了實現一個介面,起到一個規範的作用,規範繼承這個類的程式設計師必須實現這個函式。1、簡介假設我們有下面的類層次: