vue3中一个组件调用另外一个组件的方法

vue3中一个组件调用另外一个组件的方法

1,组件化开发是vue的比较常用的,这里简单写一个vue3的组件化开发demo案例

组件1

<template>
  <el-button type="primary" @click="externalAdd">外部组件函数</el-button> // 外部组件点击函数
  <Add ref="addInfo" :type="type"></Add> //外部组件
</template>
<script>

import { onMounted, onUnmounted, reactive, ref, toRefs } from "vue"; //引入需要用的vue
import { ElMessage } from "element-plus";
import Add from "@/components/addcl.vue"; //在当前页面引入外部组件页面
export default {
  name: "demo",
  components: {
    Add, //注册外部组件
  },
}
  setup() {
    const addInfo = ref(null); //获取组件的ref
 }
 const state = reactive({
	type: "add",
 })
 const externalAdd = () => {
  state.type = "add";
  addInfo.value.open(); //获取到ref后,调用add组件中定义好的函数
};
  return {
    ...toRefs(state),
    addInfo //ref
  };

组件2

<template>
  <el-dialog
    :title="type == 'add' ? '添加' : '修改'"
    v-model="visible"
    width="400px"
  >
	//内容
  </el-dialog>
</template>
<script>
import { reactive, ref, toRefs } from 'vue'
import { ElMessage } from 'element-plus'
export default {
  name: 'demo1',
  props: {
    type: String, //prpos 接收传过来的参数 type
  },
  setup(props) {
  //props里也会有你传过来的参数
	const state = reactive({
      visible: false,
    })
 }
}
//开启弹窗函数
 const open = (id) => {
   state.visible = true;
   if (id)  // 修改 
   else // 添加
 }
 return {
  ...toRefs(state),
  open,
}

希望此文章能帮助到你