使用 Vue.component()全局注册组件
新建两个文件:test.vue 、index.js
// test.vue 这里定义我们准备多次复用的组件 <template> <div> <h3>Hello {{name}}</h3> <button @click="changeName()">changeName</button> </div> </template> <script> export default { name:'Test', data() { return { name: "Vue" }; }, methods: { changeName() { this.name = "JavaScript"; } } }; </script>
// index.js 这里注册我们编写的公共组件 import Vue from 'vue' import Test from './test.vue' Vue.component(Test.name, Test)
// main.js 在项目入口文件中引入相关文件 import './components/index'
// 在对应组件中应用 <template> <div> <test></test> </div> </template> <script> export default { data(){ return{} }, methods: {}, } </script>
注意: