本文主要是介绍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 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指的是组件模板。
这篇关于Vue自定义组件(简单实现一个自定义组件)的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!