孫組件如何調用父組件的方法

㈠ vue 自組件怎麼直接訪問父組件

問題分析：

在Vue中，子組件如果需要訪問父組件的方法，可以採用自定義事件v-on指令（簡寫：@）來完成。

舉例如下：

以下案例將演示點擊子組件模板中的按鈕，觸發子組件中的方法childFunc。然後在該方法中使用$emit來觸發子組件的自定義事件parent。由該自定義事件來調用父組件的parentFun方法。

HTML代碼：

<divid="app">
<child@parent='parentFunc'></child>
</div>

Vue代碼：

Vue.component('child',{
template:'<buttonv-on:click="childFunc">觸發按鈕</button>',
methods:{
childFunc:function(){
this.$emit('parent');
}
},
})
newVue({
el:'#app',
methods:{
parentFunc:function(){
alert('我是來自父組件的內容');
}
}
})

點擊子組件按鈕後的效果：

總結：

從頁面提示出的結果可以看出，當點擊子組件按鈕時，調用了父組件中的parentFunc方法。

㈡ vue 子父組件相互調用的方法 2018-11-09

以下內容只是我個人學習時的記錄，可能與實際有偏差，大佬勿怪

1傳值（父傳子）
父組件給子組件傳值 藉助 props

父組件：
傳一個叫做 put_child 的變數給子組件

子組件：
子組件在 props 中定義接受的變數，然後就能使用

2傳值（子傳父）
子組件給父組件傳值，通過 $emit

父組件：
在父組件中綁定一個屬性,同時定義一個方法接受，子組件發送過來的數據

子組件：
調用 $emit 傳給父組件上綁定的屬性，剩下的就是父組件處理了

3.調用方法(子調父)
目前只掌握了，同$emit傳值給父一樣,同上這里就不寫出了

4.調用方法(父用子)
父組件：
在父組件中 ref 屬性 定義一個變數，當我使用 this.$refs.變數 會把子組件對象返回，這樣我們就可以調用子組件的方法

㈢ react 子組件調用父組件方法

史上最簡單易理解的宴謹磨 React 子組件調用父組件方法

我們只要記住 父組件通過 isShow={this.hideSon}來綁定方法。
子組件通過props 來接收這晌敏個方法 ,然後通過 onClick={ isShow }來執行父組件晌斗的方法。
這下就非常明白了,關鍵點就在isShow
在父組件中 isShow 用來代替onClick
在子組件中onClick 來點擊 isShow。

㈣ Vue3 依賴注入------父級組件與子孫級組件之間的數據傳遞

依賴注入是針對 父級組件與子孫級組件之間的數據傳遞 數據的傳遞，或者有很多後代組件的情況，只針對直系後代使用，實現組件之間的數據共享。

需要使用到vue提供的 provide以及inject 方法

其中，provide用來提供傳遞的數據，inject用來接收數據

子組件的如果備握橡也想要使用爺爺組件的數據，操作方法是一樣的，也是通過inject進行接收並且return，然後直接使用即可。

總結：

1.父傳子孫數據：provide

2.子孫得到數據：inject

這里還是使用provide和inject來進行數據的傳遞，但是這次是通過函數的參數進行傳值。

1.導入provide和inject到父組件中

2.通過provide聲明函數，並要有形參用來接收孫組件傳來的實參

總結：

1.孫子組件傳遞數據給爺爺組件，需要通過provide一個函數的方式實現

2.爺爺組件傳遞一個函數，後續通過函數的形參獲取數據

孫子組件獲取並調用該函數傳遞數據

1.父子傳參：

爹給兒子傳遞數據，通過 自定義屬性 ，給組件props屬性，然後綁定在父組件的子組件上

兒子給仿旁爹傳遞數據，通過 自定義事件

2.爺爺孫子傳參：

孫子給爺爺傳值是 函數 ，通過provide一個函數，在孫子組件inject注入，然後通過參數傳遞想要傳遞的值

爺爺給子孫傳遞 數據 ，通過provide一個變數和值，在孫子組件inject注入，孫子組件通過inject接收數據即可。

3.後代給前輩 傳數據都需要 函數傳參

4.自皮衡定義屬性、事件（函數）一般都綁定在父組件中，也就是provide一般出現在父組件，不論是提供給孫組件的數據還是接收孫組件數據的函數

㈤ weex調用父組件的方法

在 Weex 中，可以使用 `this.$refs` 來獲取組件的引用，然後通過引用調用組件的方法。如果要調用父組件的方法，可以通過 `$parent` 屬性來獲取到父組件的引用，然後調用父組件的方法。

例如，假設有一個父組件 `Parent` 和一個子組件 `Child`，子組件想要調用父組件的方法 `parentMethod`，可以按照以下步驟進行操作：

1. 在父組件中定粗敬鬧義 `parentMethod` 方法：

```javascript
<template>
<div>
<Child ref="child"></Child>
</div>
</template>

<script>
export default {
methods: {
parentMethod() {
// 父組件的方法邏輯
}
}
}
</script>
```

2. 在子組件中使用 `$parent` 屬性獲取父組件的引用，並調用父組件岩罩的方法：

```javascript
<template>
<div>
<button @click="callParentMethod">調用父組件方法</button>
</div>
</template>

<script>
export default {
methods: {
callParentMethod() {
this.$parent.parentMethod();
}
}
}
</script>
```

在子組件中，通過 `$parent` 屬性獲取到父組件的引用，然稿晌後調用父組件的 `parentMethod` 方法。需要注意的是，如果父組件中有多個同名方法，需要使用 `$parent` 屬性來指定調用的方法是哪一個。

㈥ vue子組件怎麼調用父組件的方法

用$emit向租頌父組件觸發弊蔽鄭一個事件，父組件監聽這個事件就行了。
直接並罩用this.$parent.xxxx這樣直接調用父組件的方法。

㈦ vue子組件調用父組件的方法

一開始感覺調用方法應該和react差不多，父組件傳入子組件，子組件調用就行了。但感覺應該還有其他方法，於是將這些方法記盯前蘆錄下。

父組件中引用子組件:

子組件中寫法：

一定要在 props 里聲明 setBillDetail 函數，不然 setBillDetail 始終為 undefined !!!
初悔碼學 vue ，自己就踩了個大坑，忘記在 props 里加了。

父組凱帶件:

子組件:

這樣寫，編譯會通過，但 eslint 會給出 error ：

子組件：

總之，記住一句話： HTML 中的 attribute 名是大小寫不敏感的，所以瀏覽器會把所有大寫字元解釋為小寫字元，更推薦 kebab-case 。

此處舉例省略。

參考：
Vue子組件調用父組件的方法

㈧ angular2 在不確定父組件的情況下，子組件怎麼調用父組件的方法

1：當它們都是組件粗襪此時

父窗口好野中:

<mx:Button label="新增" click="岩迅add_clickHandler(event)"/>

protected function add_clickHandler(event:MouseEvent):void
{
addWin = new addOrModify();
PopUpManager.addPopUp(addWin,this,true);
addWin.callFunction = this.本窗口方法;//這是關鍵
}

子窗口中：

public var callFunction:Function;

callFunction.call(parent);

2：父窗口是mole,子窗口是組建

子窗口:this.parentDocument.父窗口方法名 就ok了

㈨ vue子頁面調用父頁面方法

第一種方法是直接在子組件絕差中通過this.$parent.event來調用父組件的方法

父組件

子頁面

第二種方法是在子組件里用$emit向父組件觸發一歲迅個事件，b了。

父組乎宏此件

子組件

第三種是父組件把方法傳入子組件中，在子組件里直接調用這個方法

父組件

子組件

㈩ vue子組件怎麼調用父組件的方法

vue中的組件有個ref屬性，你可以理解成組件的id，而父組件這有個屬性值叫$refs，可以取出所有帶ref屬性的組件。
然後就可以通過this.$refs.xxx訪問到子組件。xxxx即為你的組件的ref屬性的值！
裡面的屬性或者方法都可以直接取了！