vue子组件调用父组件方法

父组件里先调用子组件的方法:

1.首先引入子组件;

  import updatePhone from "./loginByPhone";

2.在components里面初始化子组件

 components: {
      updatePhone
    },

3.在template标签内定义一个标签

    <updatePhone></updatePhone>

该标签用属性ref来调用组件名
4.在方法内部调用子组件的初始化方法

          this.$nextTick(() => {
        this.$refs.updatePhone.init();
  
      });

要注意命名和import时定义的名称保持一致,否则会不出来效果
子组件如果采用element-ui的el-dialog的话,则通过vue的变量来控制隐藏和显示
init():是子组件里的方法

<el-dialog
    title="手机号绑定"
    :visible.sync="visible"
    :append-to-body="true" 
    @close="closeDialog">

:visible.sync:异步显示
@close:调用关闭时执行的方法

此时父方法中已经指向了子组件的itit()方法,所以要想让这个dialog显示,需要将异步显示的内容设置为true
在方法内部写上
this.visible = true;关闭时记得将visible设置为false即可

子组件调用父组件的方法
在子组件的方法中使用

  this.$emit('vxmethod')

vxmethod是父组件方法里定义的 ,如下

  <updatePhone @vxmethod="vxlogin(1)" v-if="updatePhoneVisible" ref="updatePhone"></updatePhone>

@vxmethod:和子组件调用父组件里的那个 this.$emit里面的值保持一致,
vxlogin(1):则是父组件里定义的方法