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

2023年9月25日 138次阅读 来源: 前端

在用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 Test

5、入口文件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指的是组件模板。

    原文作者：前端
    原文地址: https://segmentfault.com/a/1190000018031560
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞