子传父中父组件如何接收方法
时间: 2024-05-06 21:22:16 浏览: 41
子组件可以通过 props 将方法传递给父组件,然后父组件就可以直接使用该方法。
具体步骤如下:
1. 在子组件中定义需要传递给父组件的方法,并将其作为 props 传递给父组件。
```javascript
// 子组件
export default {
props: ['onChildClick'], // 定义 props,包含一个名为 onChildClick 的方法
methods: {
handleClick() {
// 子组件中的方法
this.onChildClick('Hello World!') // 调用父组件传递过来的方法,并传递参数
}
}
}
```
2. 在父组件中通过 props 接收子组件传递的方法,并将其存储在父组件中。
```javascript
// 父组件
export default {
methods: {
handleChildClick(msg) {
// 父组件中的方法
console.log(msg) // 输出:Hello World!
}
},
components: {
ChildComponent // 引入子组件
},
template: `
<div>
<ChildComponent :onChildClick="handleChildClick" /> <!-- 将父组件的方法作为 props 传递给子组件 -->
</div>
`
}
```
3. 在子组件中调用父组件传递过来的方法。
```javascript
// 子组件
export default {
props: ['onChildClick'],
methods: {
handleClick() {
this.onChildClick('Hello World!') // 调用父组件传递过来的方法,并传递参数
}
},
template: `
<div @click="handleClick"> <!-- 点击子组件时调用 handleClick 方法 -->
Click me!
</div>
`
}
```
相关推荐
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)