Vue自定义组件(简单实现一个自定义组件)

在用vue构建项目的过程中，我们有时会用到别人开发的组件如vue-router；使用他人组件的正常步骤如下：1、命令行进行安装，执行install；2、在vue项目中的入口文件main.js中，进行导入；3、然后用Vue.use(plugin)引入该组件。我们也可以创造属于自己的组件，具体步骤如下：1、在components文件中创建test文件；2、在test文件中，创建index.js和Test.vue；3、Test.vue中的代码如下：<template> <div> <div>实现自定义组件</div> </div></template><script>export default{ data () { return { msg: ‘hello vue’ } }, components: {}}</script><style></style>4、test文件夹下的index.js中的代码如下：import MyTest from ‘./Test.vue’const Test = { install (Vue) { Vue.component(‘Test’, MyTest) }}export default Test5、入口文件main.js进行相关的配置：import Test from ‘./components/test’Vue.use(Test)6、如此这般，就可以在其它组件中正常使用，如下：<template> <div class=“hello”> <Test></Test> </div></template>自定义组件Test的内容(“实现自定义组件”)将会展示出来。注：test文件指的是自定义组件文件夹；index.js指的是组件的入口加载文件；Test.vue指的是组件模板。