孙组件如何调用父组件的方法

㈠ 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属性的值！
里面的属性或者方法都可以直接取了！