VUE 父组件调用子组件的方法

首先要了解VUE中ref属性的用法

ref 被用来给元素或子组件注册引用信息。引用信息将会注册在父组件的 $refs 对象上。如果在普通的 DOM 元素上使用，引用指向的就是 DOM 元素；如果用在子组件上，引用就指向组件实例：

父窗体代码：

<template>

  <div>

<!--弹出框Morse-->

    <el-dialog :title="测试"     top="5vh"     >

      <div>

        <MorseAssess :formData="form" ref="Morse"></MorseAssess>

      </div>

         <span slot="footer" class="dialog-footer">

               <el-button @click="MorseFormVisible = false">取 消</el-button>

                <el-button type="primary" @click="confirmBtn">确 定</el-button>

      </span>

    </el-dialog>

  </div>

</template>

<script>

export default {

data() {

    return {

      name: "",

tableData:[],

    }

}，

 methods: {

    confirmBtn() {

       this.form = tableData;

 this.$nextTick(()=>{

          this.$refs.Morse.ShowForm();

        })

     },

},

}；

</script>

 

子窗体代码：

<template>

  <div>

<div>{{name}}</div>

 </div>

</template>

<script>

export default {

props: ["formData"],

data() {

    return {

      name: "",

    }

}，

 methods: {

    ShowForm() {

       this.name="Morse";

     },

},

}；

</script>

 

 

*注意：

使用ref访问子组件元素或方法是，如果需要事前传入一些数据，满足一些条件渲染完成页面才能调用的情况下，推荐使用this.$nextTick()   

this.$nextTick()将回调延迟到下次 DOM 更新循环之后执行。在修改数据之后立即使用它，然后等待 DOM 更新。它跟全局方法 Vue.nextTick 一样，不同的是回调的 this 自动绑定到调用它的实例上。