使用＜el_button＞打开一个新的VUE组件

引入VUE组件

import 自定义名 from '路径'

注册组件

export default {

  components: {
      自定义名
  },
}

在HTML部分定义组件

<template>

<组件名 ref=dialog v-on:loadData="loadData"></组件名>
</template>

 <el-button type="text" @click="dialog">打开组件
      <组件名></组件名>
  </el-button>

JS部分

  dialog() {
                console.log("击中")
              this.$refs.elDialog.init();
 },

注意的是，this.$ref.要与HTML部分组件定义的ref绑定一致

相较于原生JS VUE提供的this.$refs要更节省dom节点的消耗

不过逻辑都在于渲染dom树