Vue自定义组件(简单实现一个自定义组件)
栏目: JavaScript · 发布时间: 6年前
内容简介:在用vue构建项目的过程中,我们有时会用到别人开发的组件如vue-router;使用他人组件的正常步骤如下:1、命令行进行安装,执行install;2、在vue项目中的入口文件main.js中,进行导入;
在用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指的是组件模板。
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持 码农网
猜你喜欢:- angular自定义组件-UI组件篇-switch组件
- 简单-定义一个小程序组件
- 自定义react数据验证组件
- 关于自定义组件的那些事儿
- ReactNative学习笔记(四)之自定义文本组件与Image组件
- 小程序档案馆——自定义组件
本站部分资源来源于网络,本站转载出于传递更多信息之目的,版权归原作者或者来源机构所有,如转载稿涉及版权问题,请联系我们。
数据结构与算法分析
张琨、张宏、朱保平 / 人民邮电出版社 / 2016-2-1 / 45
本书共分10章,主要包括第1章绪论,第2章线性表,第3章栈和队列,第4章串,第5章数组和广义表,第6章 树和二叉树,第7章图,第8章查找,第9章内部排序,第10章算法分析。其内容模块涵盖了课堂教学、习题课教学、实验教学、自学辅导、综合训练等。立体化教材的使用在提高教学效率、增强教学效果、加大教学信息量、培养学生的应用与实践能力。 作者简介一起来看看 《数据结构与算法分析》 这本书的介绍吧!