vue子组件调用父组件的方法
时间:2020-03-06
本文章向大家介绍vue子组件调用父组件的方法,主要包括vue子组件调用父组件的方法使用实例、应用技巧、基本知识点总结和需要注意事项,具有一定的参考价值,需要的朋友可以参考一下。
一、$parent
父组件
<template> <div> <child></child> </div> </template> <script> import child from './child'; export default { components: { child }, methods: { fatherMethod(str) { console.log(str); } } }; </script>
子组件
<template> <div> <button @click="childMethod">点击</button> </div> </template> <script> export default { methods: { childMethod() { this.$parent.fatherMethod('hello'); } } }; </script>
二、props
父组件
<template> <div> <child :fatherMethod="fatherMethodOther"></child> </div> </template> <script> import child from './child'; export default { components: { child }, methods: { fatherMethodOther(str) { console.log(str); } } }; </script>
子组件
<template> <div> <button @click="childMethod">点击</button> </div> </template> <script> export default { props: { fatherMethod: { type: Function, default: null } }, methods: { childMethod() { if (this.fatherMethod) { this.fatherMethod('hello'); } } } }; </script>
三、$emit
父组件
<template> <div> <child @fatherMethod="fatherMethodOther"></child> </div> </template> <script> import child from './child'; export default { components: { child }, methods: { fatherMethodOther(str) { console.log(str); } } }; </script>
子组件
<template> <div> <button @click="childMethod">点击</button> </div> </template> <script> export default { methods: { childMethod() { this.$emit('fatherMethod', 'hello'); } } }; </script>
参考链接:https://www.jianshu.com/p/3b2651529dad
原文地址:https://www.cnblogs.com/helloNico/p/12427654.html
- JavaScript 教程
- JavaScript 编辑工具
- JavaScript 与HTML
- JavaScript 与Java
- JavaScript 数据结构
- JavaScript 基本数据类型
- JavaScript 特殊数据类型
- JavaScript 运算符
- JavaScript typeof 运算符
- JavaScript 表达式
- JavaScript 类型转换
- JavaScript 基本语法
- JavaScript 注释
- Javascript 基本处理流程
- Javascript 选择结构
- Javascript if 语句
- Javascript if 语句的嵌套
- Javascript switch 语句
- Javascript 循环结构
- Javascript 循环结构实例
- Javascript 跳转语句
- Javascript 控制语句总结
- Javascript 函数介绍
- Javascript 函数的定义
- Javascript 函数调用
- Javascript 几种特殊的函数
- JavaScript 内置函数简介
- Javascript eval() 函数
- Javascript isFinite() 函数
- Javascript isNaN() 函数
- parseInt() 与 parseFloat()
- escape() 与 unescape()
- Javascript 字符串介绍
- Javascript length属性
- javascript 字符串函数
- Javascript 日期对象简介
- Javascript 日期对象用途
- Date 对象属性和方法
- Javascript 数组是什么
- Javascript 创建数组
- Javascript 数组赋值与取值
- Javascript 数组属性和方法
- Python多进程
- app反编译遇到360加固,傻瓜式脱壳
- Java底层-本地接口(JNI)
- 如何从最坏、平均、最好的情况分析复杂度?
- 利用Python进行MR栅格数据处理
- 利用Sql处理MR栅格数据
- Netty组件之Channel注册
- 使用 kubeadm 安装单 master kubernetes 集群
- 垃圾回收算法(4)-复制算法
- Digital-Signature-Hijack:一款针对数字签名劫持的PowerShell脚本
- 使用TensorFlow物体检测模型、Python和OpenCV的社交距离检测器
- 基于OpenCV和Tensorflow的深蹲检测器
- BBPress未经身份验证的提权漏洞分析
- 开源日志管理系统Graylog之Sidecar功能实践
- CentOS-AltArch-7(ARM版)下源码编译MySQL5.7.31