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

客官°小女子只卖身不卖艺 2024-04-19 09:05 52阅读 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 条评论，52人围观）

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

相关阅读

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

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

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

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

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

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

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

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

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

相关 vue中父子组件之间通信的方法

<template> <div> <div>father组件

川长思鸟来/ 2022年12月27日 04:54/ 0 赞/ 191 阅读

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

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

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

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

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

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

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

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

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

相关 Vue父子组件之间通信

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

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

相关 vue 父子组件传值以及方法调用，平行组件之间传值以及方法调用大全

vue项目经常需要组件间的传值以及方法调用，具体场景就不说了，都知道。基本上所有的传值都可以用vuex状态管理来实现，只要在组件内监听vuex就好。 vue常用的传值方式以及

太过爱你忘了你带给我的痛/ 2022年03月19日 05:28/ 0 赞/ 370 阅读

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

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

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