使用Vue.component（）全局注册之定义组件

使用Vue.component（）全局注册之定义组件

1，components文件夹下面创建model/test.vue

//test.vue
<template>
  <div>
    <h3>Hello &nbsp; {{name}}</h3>
    <button @click="changeName()">changeName</button>
  </div>
</template>

<script>
export default {
  name:'appTest',
  data() {
    return {
      name: "Vue"
    };
  },
  methods: {
    changeName() {
      if(this.name==='Vue'){
        this.name = "JavaScript";
      }else{
        this.name = "Vue";

      }
    }
  }
};
</script>

2,在同级文件夹下创建index.js文件，文件中导入test.vue和vue，并且使用vue.component()挂在到全局

//index.js
import Vue from 'vue'
import apptest from './test.vue'

Vue.component(apptest.name,apptest)

3，在main.js中导入

//main.js
import './components/model/index'

4，在页面使用

<template>
  <div id="app">
    <app-test></app-test>
  </div>
</template>

效果