VUE跨组件通信(一个vue页面的方法调用另一个页面的方法)

本次跨页面实现弹出窗口

1.现在第一个页面中引用，需要弹出的页面（实现点击企业信息添加弹出一个窗口）

<template>
  <div>
	<addEnterprise ref="addEnterprise"/>
	<Button @click="add_enterprise">企业信息添加</Button>
  </div>
</template>
<script>
  import addEnterprise from "./addEnterprise";//页面路径
  export default {
    name: "Enterprise",
    components:{
      addEnterprise
    }
    methods:{
      add_enterprise() {//修改企业信息
        this.$refs.addEnterprise.init("企业信息");//注意上方模板中要有ref="addEnterprise"
        //init是addEnterprise页面的方法
      }
    }
  }
</script>

2.创建弹出窗口页面弹出窗口页面(此路径为同目录下的addenterprise.vue)

<template>
  <div>
    <drawer title="企业信息" v-model="addenterprise"
      width="720" :mask-closable="false" :styles="styles">
      //页面内容
    </drawer>
  </div>
</template>
<script>
export default {
       name: "contacts",
       data () {
        return {
          addenterprise: false          
        }
      },
      methods: {
        init(title){//初始化方法
          this.addenterprise=true;//addenterprise此变量控制此页面的显示
        }
      }
   }
</script>