vue用ref来实现父子组件之间相互调用对应方法和数据

客官°小女子只卖身不卖艺 2024-04-19 09:05 114阅读 0赞

父子组件之间获取对应方法

父组件主动获取子组件的数据和方法

1.调用子组件的时候 定义一个ref

<child ref="child "></child >

2.在父组件里面通过

//this.$refs.child .属性
    
    //this.$refs.child .方法

<template>
      <div>
        <button @click="handleModify">点击</button>
        <child ref="child"></child>
      </div>
    </template>
    
    <script>
    import child from "@/components/form/child.vue";
    export default {
    name:'',
      data () {
        return {
      ModifyData:'我是父组件的数据'
        };
      },
    
      created() {},
    
      methods: {
        handleModify(index, row) {      
         this.ModifyData = JSON.parse(JSON.stringify(row)); 
        this.$refs.child.childMethods();//父组件调用子组件的childMethods()方法
        }
      }
    }
    
    </script>
    <style lang='less' scoped>
    </style>

子组件主动获取父组件的数据和方法

在子组件里面通过

//this.$parent.属性
    //this.$parent.方法

childMethods() {
          this.isModifyclass = true;
          this.ModifyForm=this.$parent.ModifyData;
        },

发表评论取消回复

表情：

评论列表（有 0 条评论，114人围观）

还没有评论，来说两句吧...

相关阅读

相关 vue用ref来实现父子组件之间相互调用对应方法和数据

子组件之间获取对应方法父组件主动获取子组件的数据和方法 1.调用子组件的时候定义一个ref <child ref="child "></child...

客官°小女子只卖身不卖艺/ 2024年04月19日 09:05/ 0 赞/ 115 阅读

相关 Vue父子组件之间传递数据

父向子：v-bind()+props 父组件绑定属性向子组件传递数据，子组件通过props进行数据的接收。父组件代码如下： <template>

怼烎@/ 2023年09月28日 11:59/ 0 赞/ 221 阅读

相关通过Vue 的实例来实现父子组件之间的通信

具体步骤： 1、先定义一个js连接器 / Created by Administrator on 2018\8\9 0009.

Bertha 。/ 2023年06月11日 10:28/ 0 赞/ 97 阅读

相关 vue 父子组件的方法调用

$emit 子组件触发父组件的方法： 1  2 <template> 3 <div id="child">

淩亂°似流年/ 2023年06月04日 02:57/ 0 赞/ 22 阅读

相关【Vue】父子组件之间方法相互触发方法

本期内容在 Vue 中因为是以组件拼装起来的页面，因此在组件中经常存在父子组件相互调用对方的方法的情况，本期内容将介绍：父组件如何触发子组件中的函数 & 子组件如何触发

r囧r小猫/ 2023年02月14日 02:56/ 0 赞/ 95 阅读

相关 vue 父子组件之间访问 this.$refs 和 this.$parent

项目结构 ![在这里插入图片描述][2021032611473390.png] 父组件 data Ptitle:'我是父组件' 子组件 data

向右看齐/ 2022年11月13日 07:28/ 0 赞/ 194 阅读

相关 vue 父子组件的方法调用

$emit 子组件触发父组件的方法：  <template> <div id="child">

小咪咪/ 2022年10月30日 12:29/ 0 赞/ 225 阅读

相关 Vue3中父子组件相互触发方法

1. 父组件触发子组件的方法父组件代码如下： <template> <div class="parent"> <butt

约定不等于承诺〃/ 2022年09月08日 05:57/ 0 赞/ 178 阅读

相关 Vue父子组件之间通信

1.子组件代码 <template> <Editor id="tinymce" :init="editorInit" v-model="message"/

﹏ヽ暗。殇╰゛Y/ 2022年03月22日 03:42/ 0 赞/ 474 阅读

相关 react 父子组件之间相互传值

From: [https://blog.csdn.net/luzhaopan/article/details/85003362][https_blog.csdn.net_luz

深藏阁楼爱情的钟/ 2021年12月09日 23:11/ 0 赞/ 444 阅读