在本案例中,由于子组件通过调用父组件的方法的方式传参,从而实现修改父组件data中的对象,所以需要啊使用$forceUpdate()进行强制刷新

父组件:


provide() {
return {
selectBase: this.selectBase
};
},

methods: {
selectBase(area) {
this.edit.areaId = area.areaId;
this.edit.areaName = area.areaName;
this.$forceUpdate();
},
}

子组件:

先注入:

inject: ["selectArea"],

再使用

handleSelect(row) {
const area = {
areaId: row.areaId,
areaName: row.areaName
};
this.selectArea(area);
this.dialogFormVisible = false;
}

vue:子组件通过调用父组件的方法的方式传参的更多相关文章

  1. vue中子组件需调用父组件通过异步获取的数据

    原因:子组件需要调用父组件传过来的数据,如果这个数据是异步从接口里取的,那这个组件在任何生命周期里都取不到,而应该在接口调取后取到. 需要在msg拿到值后才调用组件,然后你在生命周期created里面 ...

  2. uni-app 子组件如何调用父组件的方法

    1.在父组件methods中定义一个方法: changeType:function(type){ this.typeActive = type; alert(type); } 2.在父组件引用子组件时 ...

  3. 【转】C# 子窗体如何调用父窗体的方法

    网络上有几种方法,先总结如下: 调用窗体(父):FormFather,被调用窗体(子):FormSub. 方法1: 所有权法       //FormFather:        //需要有一个公共的 ...

  4. vue中子组件调用父组件里面的数据和方法 父组件调用子组件的数据和方法

    1.子组件直接调用父组件的数据和方法 在父组件father,vue <template> <div> <!-- 父组件里面的数据 --> <p>父组件里 ...

  5. react 中子组件调用父组件的方法

    1.在父组件中定义方法,并绑定在子组件上 // 在子组件中调用父组件中的方法 import React,{Component} from 'react'; import Child from './c ...

  6. vue 子组件调用父组件的方法

    vue中 父子组件的通信: 子组件通过 props: { //子组件中写的. childMsg: { //字段名 type: Array,//类型 default: [0,0,0] //这样可以指定默 ...

  7. Vue 子组件调用父组件方法

    父组件内容: <template> <div> <info-wnd ref="infoWnd" @parentClick="wndClick ...

  8. Vue子组件调用父组件的方法

    Vue子组件调用父组件的方法   Vue中子组件调用父组件的方法,这里有三种方法提供参考 第一种方法是直接在子组件中通过this.$parent.event来调用父组件的方法 父组件 <temp ...

  9. Vue 子组件调用父组件 $emit

    <!DOCTYPE html><html>    <head>        <meta charset="utf-8">      ...

随机推荐

  1. Java 复习整理day09

    package com.it.demo01_thread; /* 案例: 多线程简介. 概述: 指的是进程有多条执行路径, 统称叫: 多线程. 进程: 指的是可执行程序, 文件(例如: .exe) 大 ...

  2. HihoCoder-1870 Jin Yong’s Wukong Ranking List(并查集)

    我发现大佬好像都是用拓扑排序写的(本菜鸡不会拓扑哭唧唧 说一下并查集的做法吧... 就是找两人右边的(辣鸡的那个人)那个是否比左边厉害,厉害的话就矛盾. 如果他俩没比较过就把厉害的并到辣鸡的. (辣鸡 ...

  3. C# 同步和异步(概念理解)

    C#  同步和异步 IO 概念区分 四个相关概念: 同步(Synchronous) 异步( Asynchronous) 阻塞( Blocking ) 非阻塞( Nonblocking) 同步异步图解 ...

  4. k8s-1-交付dubbo微服务

    一.Dubbo微服务概述 1.1: dubbo介绍 1.2: 部署内容 二.实验环境架构 2.1: 架构 1.1 架构图解 1.最上面一排为K8S集群外服务 1.1 代码仓库使用基于git的gitee ...

  5. JVM升华篇

    01 Garbage Collect(垃圾回收) 1.1 如何确定一个对象是垃圾? 要想进行垃圾回收,得先知道什么样的对象是垃圾. 1.1.1 引用计数法 对于某个对象而言,只要应用程序中持有该对象的 ...

  6. 101道Numpy、Pandas练习题

    无论是数据分析还是机器学习,数据的预处理必不可少. 其中最常用.最基础的Python库非numpy和pandas莫属,很多初学者可能看了很多教程,但是很快就把用法忘光了. 光看不练假把式,今天向大家推 ...

  7. npm publish & 403 Forbidden

    npm publish & 403 Forbidden 403 Forbidden - PUT https://registry.npmjs.org/ https://www.npmjs.co ...

  8. PWA All In One

    PWA All In One chrome://apps/ PWA Progressive Web App 可安装,添加到主屏 离线使用 轻量,快速 基于 Web 技术一套代码多端复用(移动端,桌面端 ...

  9. super fast sort algorithm in js

    super fast sort algorithm in js sort algorithm Promise.race (return the fast one) Async / Await // c ...

  10. Flutter for Desktop

    Flutter for Desktop https://flutter.dev/desktop https://github.com/flutter/flutter/wiki/Desktop-shel ...