Vue 組件子傳父理解篇

wudengzan 發(fā)布于2019-08-23 15:07 / 575人閱讀

摘要：子傳父想要子傳父，通過子組件控制父組件方法，進(jìn)而讓父組件的方法自己改變自己的明確父組件綁定的上內(nèi)容作用域都屬于父組件的，因此傳值的都是父組件的或者例如下面的案例，首先和中左面都是子組件的接受的變量值，右面都有可能是父組件或者傳值簡(jiǎn)單

vue 子傳父

1.想要子傳父，通過子組件控制父組件方法，進(jìn)而讓父組件的方法自己改變自己的data
2.明確父組件綁定的dom上內(nèi)容作用域都屬于父組件的，因此傳值的都是父組件的data或者methods例如
下面的案例，首先v-bind:title = "title"和@click="parentClick" 中左面都是子組件的接受的變量
值，右面都有可能是父組件data或者methods傳值:
    
        
    
3.簡(jiǎn)單總結(jié):等號(hào)左面的屬于子組件的右面屬于父組件

子傳父?jìng)€(gè)人理解

1.子傳父就是子組件控制父組件方法，讓父組件變相改變自己data
2.需要在子組件methods，某個(gè)方法中使用$emit("func","傳遞的參數(shù)") 來控制
3.這種控制是變相的，因此會(huì)在子組件中多帶帶有一個(gè)事件在內(nèi)部專門觸發(fā)，$emit
方法。

使用$emit -- 案例




    
    Title
    



    {{count}}

使用 -- sync語法糖案例

1.2.3.0新增的語法糖
2.這種就不涉及到通過方法去操控父組件中的data改變，而是利用子傳父的思
想，把props中的屬性值和父組件中的data形成捆綁，利用$emit改變子組件的
data，變相改變了父組件中的data




    
    Title
    



    {{count}}

云服務(wù)器 GPU云服務(wù)器子傳父 vue組件 vue組件開發(fā) vue父子組件通訊

文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址：http://specialneedsforspecialkids.com/yun/101548.html

相關(guān)文章

Vue——(1)父?jìng)髯樱?em>子傳父(傳值)

摘要：父?jìng)髯咏M件父組件引入子組件，使用接收父組件頁面顯示引入子組件數(shù)據(jù)子組件使用接收父組件傳過來的數(shù)據(jù)進(jìn)行處理數(shù)據(jù)，頁面顯示內(nèi)容，我是默認(rèn)值，可以不定義子傳父組件父組件引入子組件，注冊(cè)子組件父組件中中使用子組件的點(diǎn)擊事件子組件正常寫入內(nèi)容，使用點(diǎn) 父?jìng)髯咏M件父組件引入子組件，使用components接收；父組件頁面顯示引入子組件數(shù)據(jù)；子組件使用props接收父組件傳過來的數(shù)據(jù)進(jìn)行ch...

NervosNetwork 2019-08-26 10:58 評(píng)論0 收藏0
手挽手帶你學(xué)React：二檔 React生命周期以及組件開發(fā)

摘要：手挽手帶你學(xué)入門二檔組件開發(fā)的開始，合理運(yùn)用生命周期和組件，能夠讓你的開發(fā)變地流利又這篇文章帶你學(xué)會(huì)創(chuàng)建組件，運(yùn)用組建。手挽手帶你學(xué)React入門二檔,組件開發(fā)的開始，合理運(yùn)用生命周期和組件，能夠讓你的開發(fā)變地流利又happy,這篇文章帶你學(xué)會(huì)創(chuàng)建組件，運(yùn)用組建。學(xué)起來吧！ React 組件生命周期學(xué)習(xí)React，生命周期很重要，我們了解完生命周期的各個(gè)組件，對(duì)寫高性能組件會(huì)有很大...

izhuhaodev 2019-08-23 15:11 評(píng)論0 收藏0
Vue 組件通信的解決方案

摘要：數(shù)據(jù)通信首先我們通常說數(shù)據(jù)傳遞組件通信什么什么的我認(rèn)為可以分成兩種場(chǎng)景頁面和頁面之間組件和組件之間通信方案不管什么場(chǎng)景在使用的時(shí)候一般我們有下面種選擇去實(shí)現(xiàn)數(shù)據(jù)通信選擇通信方案我們?cè)谶x擇通信方案的時(shí)候比如說確定列表頁如何把每一項(xiàng)的傳遞給詳情數(shù)據(jù)通信首先, 我們通常說數(shù)據(jù)傳遞, 組件通信什么什么的, 我認(rèn)為可以分成兩種場(chǎng)景: 頁面和頁面之間組件和組件之間通信方案不管什么場(chǎng)景...

liukai90 2019-08-21 11:47 評(píng)論0 收藏0
React之組件通信

摘要：最近閑來無事自學(xué)框架，自學(xué)過程中所有的問題經(jīng)驗(yàn)都會(huì)在此記錄，希望可以幫助到學(xué)習(xí)框架的同學(xué)廢話不多說上代碼。最近閑來無事自學(xué)React框架，自學(xué)過程中所有的問題經(jīng)驗(yàn)都會(huì)在此記錄，希望可以幫助到學(xué)習(xí)React框架的同學(xué),廢話不多說上代碼。首先是父?jìng)髯樱?import React, { Component } from react; import Com1 from ./componmen...

binta 2019-08-26 13:42 評(píng)論0 收藏0
Vue 組件通信詳解

摘要：父子組件通信兄弟組件通信跨級(jí)組件通信父?jìng)髯幼咏M件用接收，父組件用發(fā)送父組件紅樓夢(mèng)西游記三國演義水滸傳子組件子傳父子組件用有的版本名稱只能小寫發(fā)送，父組件自定義事件然后在方法中接收父組件不能加括號(hào)子組件點(diǎn)擊把傳給父組件可以傳父子組件通信： props、 $parent / $children、 provide / inject 、 ref 、 $attrs / $listeners ...

mikasa 2019-08-23 18:07 評(píng)論0 收藏0