IT数码 购物 网址 头条 软件 日历 阅读 图书馆
TxT小说阅读器
↓语音阅读,小说下载,古典文学↓
图片批量下载器
↓批量下载图片,美女图库↓
图片自动播放器
↓图片自动播放器↓
一键清除垃圾
↓轻轻一点,清除系统垃圾↓
开发: C++知识库 Java知识库 JavaScript Python PHP知识库 人工智能 区块链 大数据 移动开发 嵌入式 开发工具 数据结构与算法 开发测试 游戏开发 网络协议 系统运维
教程: HTML教程 CSS教程 JavaScript教程 Go语言教程 JQuery教程 VUE教程 VUE3教程 Bootstrap教程 SQL数据库教程 C语言教程 C++教程 Java教程 Python教程 Python3教程 C#教程
数码: 电脑 笔记本 显卡 显示器 固态硬盘 硬盘 耳机 手机 iphone vivo oppo 小米 华为 单反 装机 图拉丁
 
   -> JavaScript知识库 -> Vue3.x中子组件调用父组件的方法 -> 正文阅读

[JavaScript知识库]Vue3.x中子组件调用父组件的方法


前言

困难与折磨对于人来说,是一把打向坯料的锤,打掉的应是脆弱的铁屑,锻成的将是锋利的钢刀。

前端时间在开发项目时使用npm来自动创建vue cli项目,由于之前使用的Vue都是2.x的版本,现在通过npm自动导入的vue版本是3.x的,两个版本上的语法做了相应的调整与改变,无论是vue-router还是其他vue生态,都让我结结实实的踩了不少坑,也很庆幸从坑中爬了出来并在此留下记录,本文解决我当时在子组件中如何调用父组件中的方法。


提示:以下是本篇文章正文内容,下面案例可供参考

一、问题描述

在项目中作者导入了Ace Admin前端,在左侧导航栏中实现样式的切换时因为子组件无法调用父组件的方法导致了一系列问题的出现。
前提条件:vue-router引入正确,<router-link><router-view>等标签均正确
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在vue3.x中不仅网页中左侧导航栏的样式没有改变,甚至还引发了点击其它页面时地址发生了改变,但是页面内容却不发生改变
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述


二、解决方法

期间在网页上也查了很多相应的内容,发现绝大多数人类似问题是出在了语法拼写的错误以及网页标签嵌套等问题,在看了官方的文档以及N个小时的折磨之后,终于找到了解决的办法
期间我在想是不是$parent无法访问了,因此我在代码中添加了一些alert函数,看是否能输出相应的提示信息

1. 问题原因

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

2. 解决办法

因此在子组件中导入了父组件,并且调用父组件内methods下的方法,最后上面提到的问题都得到了解决。开始引入父组件时的调用方法语句为admin.activeSidebar(id),但是没有效果,之后发现应该按层级往下调用
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述


总结

以上就是解决子组件中调用父组件方法中的内容,继续迎接下一个挑战。
在这里插入图片描述

  JavaScript知识库 最新文章
ES6的相关知识点
react 函数式组件 & react其他一些总结
Vue基础超详细
前端JS也可以连点成线(Vue中运用 AntVG6)
Vue事件处理的基本使用
Vue后台项目的记录 (一)
前后端分离vue跨域,devServer配置proxy代理
TypeScript
初识vuex
vue项目安装包指令收集
上一篇文章      下一篇文章      查看所有文章
加:2021-08-08 11:13:05  更:2021-08-08 11:16:21 
 
开发: C++知识库 Java知识库 JavaScript Python PHP知识库 人工智能 区块链 大数据 移动开发 嵌入式 开发工具 数据结构与算法 开发测试 游戏开发 网络协议 系统运维
教程: HTML教程 CSS教程 JavaScript教程 Go语言教程 JQuery教程 VUE教程 VUE3教程 Bootstrap教程 SQL数据库教程 C语言教程 C++教程 Java教程 Python教程 Python3教程 C#教程
数码: 电脑 笔记本 显卡 显示器 固态硬盘 硬盘 耳机 手机 iphone vivo oppo 小米 华为 单反 装机 图拉丁

360图书馆 购物 三丰科技 阅读网 日历 万年历 2024年5日历 -2024/5/19 10:20:40-

图片自动播放器
↓图片自动播放器↓
TxT小说阅读器
↓语音阅读,小说下载,古典文学↓
一键清除垃圾
↓轻轻一点,清除系统垃圾↓
图片批量下载器
↓批量下载图片,美女图库↓
  网站联系: qq:121756557 email:121756557@qq.com  IT数码