vue父组件调用子组件方法

vue父组件调用子组件方法

比如，父组件有一个弹窗组件，在子组件里定义自己的显示隐藏效果，父组件调用。
通过ref调用子组件的方法

1. 父组件代码

<template>
  <div>
  	//父组件点击事件
    <el-button type="primary" @click="parentOpenDialog">打开弹窗</el-button>
    
    //父组件使用子组件，写上ref=""
	<dialog ref="dialog"></dialog>

  </div>
</template>
<script>
import dialog from "./components/dialog";
export default {
components: { dialog},
  data() {
    return {};
  },
  methods: {
    //父组件methods
	parentOpenDialog() {
	  this.$nextTick(() => {
	    this.$refs["dialog"].openDialog();
	  });
	},
  }
};
</script>

2. 子组件代码

<template>
  <div>
    <el-dialog title="父组件调用子组件方法" :visible.sync="dialogVisible">
      <div>父组件调用子组件方法</div>
    </el-dialog>
  </div>
</template>

<script>
export default {
  data() {
    return {
      dialogVisible: false,
    };
  },
  methods: {
    openDialog() {
      this.dialogVisible = true;
    }
  }
};
</script>