将一个vue文件在另一个vue文件中应用做为组件，简单应用

template>

</template>
<script>
export default{

  methods:{
    con(){
      console.log("a");//在网页控制台输出
    }
  }
}

</script>



<template>
  <div>
    <test1 ref ="test"></test1>
    <el-button size="small" type="success" icon="el-icon-share" @click="test()">
      测试
    </el-button>
  </div>
</template>
<script>
import test1 from "../test/test1";

export default{
  components:{
    test1
  },
  methods:{
    test(){
      this.$refs.test.con();
    }
  }
}
</script>

<test1 ref ="test"></test1>     

ref 被用来给DOM元素或子组件注册引用信息。引用信息会根据父组件的 $refs 对象进行注册。如果在普通的DOM元素上使用，引用信息就是元素; 如果用在子组件上，引用信息就是组件实例。

注意：只要想要在Vue中直接操作DOM元素，就必须用ref属性进行注册

import test1 from "../test/test1"

 "../" 表示导入的是文件夹外面的，”./“表示是同一文件夹之下的。

我的文件夹是这样的：

 

为按钮设置了一个点击事件，当点击按钮时，调用test1中的con方法。

 最终结果在控制台输出字符a。