vue中this.$parent的使用方式

目录
  • vue组件this.$parent
    • 一、在实例中
    • 二、在组件中调用组件
  • vue子组件this.$parent调用父组件方法报错
    • TypeError:this.parent.xxx is not a function
    • 或者将子组件移到 UI 组件外面也可以调用到

vue组件this.$parent

在使用vue时,你可能会用到this.$parent来进行组件与组件或者组件与外部实例的数据以及方法调用,这里简单介绍下两种使用环境.(这里你可以理解外部实例为非第三方组件)

一、在实例中

this.$parent 写在组件里面,外部实例调用此组件,则其指向vue实例(这里是调用组件的实例),你可以在组件中调用 data,methods:

//例子
    this.$parent.list;//数据(模拟)
    this.$parent.request();//方法(模拟)

二、在组件中调用组件

this.$parent 写在组件里面,外部组件调用此组件,则其指向这个组件:

举个例子：

比如elementPlus的组件 el-menu ,我们将其里面的一级二级菜单封装为一个组件,命名为 name:‘DemoMenu’,

//例子
    <el-menu>
        <DemoMenu :list='list'/>
    </el-menu>

这种使用方式 this.$parent 就不是指向外部实例,而是指向 el-menu;

vue子组件this.$parent调用父组件方法报错

TypeError:this.parent.xxx is not a function

在做 vue 项目开发时，遇到了在子组件中利用this.$parent调用父组件的自定义方法，报TypeError: this.$parent.xxx is not a function的错，可是在父组件明明定义了该方法，遂查询 vue.js 的官方文档，但是文档也只有简短的说明，并没有相关的错误提示。

官方文档中没有提示，那就只能自己动手找原因了，随即就在子组件中打印了this.$parent ,通过控制台的打印，发现打印出来的 this.$parent并不是该组件的父组件，而是 Element ui 的组件，原来是我在父组件引用子组件的时候还在外面套了多层 UI 组件导致的。

<div class='app-container'>
    <el-row :guter='20'>
        <el-col>
            ......
            <el-card>
            ......
                <el-tabs v-model="activeName" @tab-click="handleClick">
                     <p slot="title">标题</p>
                     <my-component></my-component>
                 </el-tabs>
            </el-card>
        </el-col>
    </el-row>
</div>

打印this.parent会发现my−component的父组件为 parent会发现my-component的父组件为parent会发现my−component的父组件为 $el:div#pane-userinfo.el-tab-pane,需要一直$this.parent.parent.parent.parent.parent.parent找到 $el:div.app-contain 才可调用父组件方法。

或者将子组件移到 UI 组件外面也可以调用到

<div class='app-container'>
     <my-component></my-component>     
</div>

以上为个人经验，希望能给大家一个参考，也希望大家多多支持我们。

赞 (0)

相关推荐

  • 实例详解vue中的$root和$parent

    $root vue状态管理使用vuex,如果项目不大,逻辑不多,name我们没必要用vuex给项目增加难度,只需要用$root设置vue实例的data就行了,如下 main.js new Vue({ data(){ return{ loading:true } }, router, store, render: h => h(App) }).$mount('#app') a.vue created(){ console.log(this.$root.loading) //获取loading的值

  • vue组件 $children,$refs，$parent的使用详解

    vue组件 $children,$refs，$parent的使用详解

    本文介绍了vue组件 $children,$refs,$parent的使用,分享给大家,也自己留个笔记 如果项目很大,组件很多,怎么样才能准确的.快速的寻找到我们想要的组件了?? 1)$refs 首先你的给子组件做标记.demo :<firstchild ref="one"></firstchild> 然后在父组件中,通过this.$refs.one就可以访问了这个自组件了,包括访问自组件的data里面的数据,调用它的函数 2)$children 他返回的是一个

  • vue父子组件间引用之$parent、$children

    vue中提到[父子组件],则一定会想到我们常用的父子组件通信:props+$on().$emit() ,如图: 也就是说,虽然在一般情况下,子组件是不能引用父组件或者Vue实例的数据,但是对于在开发中出现的"数据需要在组件中来回传递",我们最简单的解决办法就是通过props(和v-on)将数据从父组件传到子组件,再用$emit将数据从子组件传到父组件,以此循环引用. 但是在另一些场景下,我们可能想要比如(在父组件中)拿到子组件对象,然后直接操作其中数据,去实现一些功能,比如方法的调用.

  • vue中this.$parent的使用方式

    目录 vue组件this.$parent 一.在实例中 二.在组件中调用组件 vue子组件this.$parent调用父组件方法报错 TypeError:this.parent.xxx is not a function 或者将子组件移到 UI 组件外面也可以调用到 vue组件this.$parent 在使用vue时,你可能会用到this.$parent来进行组件与组件或者组件与外部实例的数据以及方法调用,这里简单介绍下两种使用环境.(这里你可以理解外部实例为非第三方组件) 一.在实例中 thi

  • 在vue中使用axios实现post方式获取二进制流下载文件(实例代码)

    需求 点击导出下载表格对应的excel文件 在 vue 项目中,使用的 axios ,后台 java 提供的 post 接口 api 实现 第一步,在 axios 请求中加入参数,表示接收的数据为二进制文件流 responseType: 'blob' 第二步,在拿到数据流之后,把流转为指定文件格式并创建a标签,模拟点击下载,实现文件下载功能 let blob = res.data let reader = new FileReader() reader.readAsDataURL(blob) r

  • ant design vue中表格指定格式渲染方式

    注意点:定义的columns一定要写在data中,否则在加载过程中由于渲染顺序会导致其中的渲染函数无法识别 渲染方法1: 指定渲染函数: const columns = [ { title: '排名', dataIndex: 'key', customRender: renderContent // 渲染函数的规则 }, { title: '搜索关键词', dataIndex: 'keyword', customRender: (text, row, index) => { if (index

  • 前端vue中文件下载的三种方式汇总

    目录 前端vue中文件下载的三种方式 附:vue实现图片或文件下载功能实例 总结 前端vue中文件下载的三种方式 第一种方式是前端创建超链接,通过a标签的链接向后端服务发get请求,接收后端的文件流,非常简单: <a :href='"/user/downloadExcel"' >下载模板</a> 另一种情况是创建div标签,动态创建a标签: <div name="downloadfile" onclick="downloadE

  • vue中使用Axios最佳实践方式

    目录 1.前言 2.使用 2.1安装 2.2基本用例 2.2.1 get请求 2.2.2post请求 3.配置 3.1语法 3.2别名 4.Axios实例 4.1语法 4.2请求配置 4.3响应的配置 配置的优先级 5.拦截器 6.错误拦截 7.取消请求 8.完整封装 建立http.ts文件编写clas Http类 9.总结 1.前言 最近在写vue3的项目,需要重新搭建脚手架并且使用网络请求接口,对于js的网络请求接口的一般有几种常用的方式: fetch XMLHttpRequests aja

  • vue中路由跳转的方式有哪些你知道吗

    目录 第一种方式:router-link (声明式路由) 第二种方式:router.push(编程式路由) 第三种方式:this.$router.push() (函数里面调用) 第四种方式:this.$router.replace() (用法同上,push) 参考: 总结 第一种方式:router-link (声明式路由) 1. 不带参数 <router-link :to="{name:'home'}"> <router-link :to="{path:'/

  • Vue中使用eslint和editorconfig方式

    目录 使用eslint和editorconfig方式 使用eslint的好处 安装eslint 文件配置说明 启动命令配置 自动检查语法配置 添加editorconfig vue editorconfig编辑器配置说明 editorconfig是什么,有什么用 editorconfig示例 检查是否生效 Editorconfig 插件 使用eslint和editorconfig方式 使用eslint的好处 1.避免运行时因格式问题报错 2.方便团队合作,代码风格统一 安装eslint 命令行执行

  • vue中对时间戳的处理方式

    目录 vue对时间戳的处理 1.自建js文件 2.在组件模板中引用定义好的时间戳函数 3.设置好在script中的引用和定义 vue时间戳转换 vue对时间戳的处理 1.自建js文件 文件位置根据自己的项目位置自定义 export function formatDate(date, fmt) {     if (/(y+)/.test(fmt)) {         fmt = fmt.replace(RegExp.$1, (date.getFullYear() + '').substr(4 -

  • Vue中自定义标签及其使用方式

    Vue中自定义标签及其使用方式

    目录 问题 需求 自定义 创建组件的vue文件 编辑组件 使用 导入 申明使用 使用 整个代码 效果 问题 我们在使用Vue开发移动端应用程序时,常常使用Vant Weapp中的组件库,但是我们想过它是怎么实现的吗?是否我们也可以自己编写并且调用呢? 这里我将要讲解我在自定义标签方面的使用. 需求 这里我想要建一个名叫:<test>的组件. 功能是:组成两个按钮,且两个按钮颜色不同. 注意:这里的组件名.功能都是可以自定义的,按自己需求来取舍. 自定义 创建组件的vue文件 我们更目录设置为s

  • vue中的el-button样式自定义方式

    vue中的el-button样式自定义方式

    目录 vue el-button样式自定义 按钮的三种状态 用按钮切换界面 element button自定义图标 实现效果 代码实现 vue el-button样式自定义 按钮的三种状态 /* 更改elememt-ui地固定样式 */ /*按钮的背景颜色样式*/ .el-button--primary { background-color: rgb(247, 146, 146) !important; } /*鼠标经过*/ .el-button--primary:hover { backgro

随机推荐