vue2.0父組件與子組件之間的通信

阿新 • • 發佈：2017-12-21

文件夾授權處理方法傳值目錄結構著作權 sage 結構 ssa

vue是一個輕量級的漸進式框架，對於它的一些特性和優點包括環境的一些配置在此就不做贅述，本篇文章主要來探討一下vue子父組件之間通信的問題

首先我們先來看一個demo,目錄結構為這樣：

　?src

　　　　 ?components

　　　　　　 ?child.vue

　　　　　　?app.vue

此時App.vue應為這樣：

　　技術分享圖片

一、父組件向子組件傳值

1.創建子組件，在src/components/文件夾下新建一個Child.vue

2.Child.vue中創建props，然後創建一個名為message的屬性

技術分享圖片

3.在App.vue中註冊Child組件，並在template中加入child標簽，標簽中添加message屬性並賦值

技術分享圖片

4.保存修改的文件，查看瀏覽器

技術分享圖片

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

技術分享圖片

此時瀏覽器中

browser2.png

父組件向子組件傳值成功
總結一下：

子組件在props中創建一個屬性，用以接收父組件傳過來的值
父組件中註冊子組件
在子組件標簽中添加子組件props中創建的屬性
把需要傳給子組件的值賦給該屬性

二.子組件向父組件傳值

1.在子組件中創建一個按鈕，給按鈕綁定一個點擊事件

Child2.png

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

Child3.png
3.在父組件中的子標簽中監聽該自定義事件並添加一個響應該事件的處理方法
技術分享圖片

App4.png

4.保存修改的文件，在瀏覽器中點擊按鈕

browser3.png

子組件向父組件傳值成功
總結一下：

子組件中需要以某種方式例如點擊事件的方法來觸發一個自定義事件
將需要傳的值作為$emit的第二個參數，該值將作為實參傳給響應自定義事件的方法
在父組件中註冊子組件並在子組件標簽上綁定對自定義事件的監聽

在通信中，無論是子組件向父組件傳值還是父組件向子組件傳值，他們都有一個共同點就是有中間介質，子向父的介質是自定義事件，父向子的介質是props中的屬性。抓準這兩點對於父子通信就好理解了



作者：PengL
鏈接：http://www.jianshu.com/p/2670ca096cf8
來源：簡書
著作權歸作者所有。商業轉載請聯系作者獲得授權，非商業轉載請註明出處。

vue2.0父組件與子組件之間的通信

文件夾授權處理方法傳值目錄結構著作權 sage 結構 ssa vue是一個輕量級的漸進式框架，對於它的一些特性和優點包括環境的一些配置在此就不做贅述，本篇文章主要來探討一下vue子父組件之間通信的問題首先我們先來看一個demo,目錄結構為這樣：　?src 　　

前端vue框架父組件與子組件之間的相互調用

-o func 方法名互調 required temp 之間 methods on() 子組件調用父組件東西：　　1.在父組件與子組件契合的標簽的的template模板中綁定 v-bind:自定義一個名字=“要調用的名字” 　　2.在子組

java異常-父類異常與子類異常之間的捕獲關係

class Annoyance extends Exception {} class Sneeze extends Annoyance {} class Human { public static void main(String[] arg

MFC中實現父對話方塊與子對話方塊之間的引數傳遞，例項可測

一、構件工程： 1.新建一個工程CPassParametersDlg，在介面上新增一個Edit(新增變數：m_result)，新增兩個Button其他設定預設，修改Caption分別為：啟動子對話方塊||傳送資料給子視窗 2.在CPassParametersDlg.

初識vue 2.0（13）：子組件使用watch監聽父組件變化

方式 color true his 無效 vue 使用官方文檔需要優雅子組件使用created或者mounted通常只能在組件初始化的時候，獲取父組件傳過來的props數據。父組件props數據發生變化，子組件默認無法感知，因此需要手動實現子組件監聽父組件變化的

組件傳值-父組件向子組件傳值和 data 與 props 的區別

filters rect width initial content tms cti pat ctype <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF

vue父組件獲取子組件的屬性或方法

class col ont hang 提交按鈕代碼 emp ref input 我遇到這樣一個情況：父組件代碼片段： 1 <button @click="submit">提交</button> 2 <v-autoTextarea ref=

react 父組件向子組件傳遞函數

eat hist extends imp pre 通過 cto [] from 這段時間一直在使用react，由於這react是單向數據綁定，總感覺有點不適用，畢竟之前一直都在使用angular，但學習還是要繼續，做了一個叠代的項目，都差點忘記要總結一下這個react了，現

vue組件-#構成組件-父組件向子組件傳遞數據

.com ima 顯式傳遞字符串一個 vue.js vue http 組件對於vue來說非常重要，學習學習了基礎vue後，再回過頭來把組件弄透！一、概念　　組件意味著協同工作，通常父子組件會是這樣的關系：組件 A 在它的模版中使用了組件 B 。　　它們之間

vue2.0學習筆記之自定義組件

2.0 sco ron 自定義組件定義 temp use 使用 imp step one: 推薦結構 step two: Loading.vue <template> <h3>{{msg}}<

vue父組件向子組件傳遞數據

rip pan ext sel name lan obj styles import 父組件 <template> <div id="app"> <v-header :childseller="fatherseller">&

Vue-組件嵌套之父組件向子組件傳值

總結點擊 size asc 分享圖片 default component one con 父組件向子組件傳值步驟：在這裏先定義一下，相對本案例來說：App.vue是父組件，Second-module.vue是子組件。一、首先，值肯定是定義在父組件中的，供所有子組件

Vue中，父組件向子組件傳值

app 接收通過 col pro 分享圖片 nts bubuko ont 1:在src/components/child/文件夾下，創建一個名為：child.vue的子組件 2：在父組件中，設置好需要傳遞的數據 3：在App.vue中引入並註冊子組件 4：通過v-b

react通過父組件渲染子組件中的內容

react通過父組件渲染子組件中的內容說明：代碼： // less require (‘./static/less/index.less‘) // 核心 var React = require(‘react‘) var ReactDom = require(‘react-dom‘) var ReactRou

antd 父組件獲取子組件中form表單的值

文檔 port lock xtend ret pro cor design code 還是拿代碼來講吧，詳情見註釋子組件 import React, { Component } from 'react'; import { Form, Input } fr

React-父組件訪問子組件內部

extend 方法 create 選擇組件 code 應用重新 reac 父子組件通信典型數據流：父組件向後代組件傳遞props，當props更新則接收對應值的後代組件觸發重新渲染；如果希望父組件能夠訪問子組件內部的信息則需要典型數據流之外的其他方法。 ref Re

vue 父組件給子組件傳值

mem pro port head 雙引號 efault 引號 imp eth 父組件Home.vue 1 <template> 2 <div> 3 <h2>這是一個首頁{{msg2}}</h2><butt

父組件往子組件傳值

com charset return span clas color 調用 strong meta <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"

18.父組件給子組件傳值

idt 分享 fff eight ima round back 分享圖片 color 1.父組件給子組件傳值 2.父組件把方法傳遞給子組件 18.父組件給子組件傳值

總結來說 mode 取值受父容器與子控件共同決定

很多 tools too data 指定 wid 完全 child 設置在自定義控件時為了滿足特定需求，widget大都是我們自己測量的。大家都知道測量時最重要的步驟就是重寫onMeasure方法，來計算出寬高。這裏面的MeasureSpec 很重要，大家也都知道，它是

vue2.0父組件與子組件之間的通信

二.子組件向父組件傳值

在通信中，無論是子組件向父組件傳值還是父組件向子組件傳值，他們都有一個共同點就是有中間介質，子向父的介質是自定義事件，父向子的介質是props中的屬性。抓準這兩點對於父子通信就好理解了

相關推薦