谈及组件,最开始,自己也不是很明白,但是在学习的过程中,逐渐明白了这个东西,它是一种可以重复使用的东西,可以减少很多无用功的东西,今天从组件的入门基础说起。
1、基本环境的搭建问题
在webpack中,搭建的方式如下:
1)、首先有一个vue文件,如hello.vue文件
2)、其次,在对应的文件中引用这个文件
3)、在引用的文件中,加入components属性,给被应用的组件配置一个新的名字
4)、在引用的文件中的合适位置引用这个新的组件名,即可实现对应的效果
2、实例
1)在src--components--img下有一个文件createImg.vue;
在src--components--product下有一个文件product1.vue;
2)需要在product1.vue中引用createImg.vue文件的内容
配置如下:
<script>标签下:
import createImg from '../img/createImg.vue';
组件配置:(v-img为本文件中使用的名称,后面的是组件名[与对应的文件的div中class内容保持一致])
components: {
'v-img':createImg
}
使用配置:(合适的位置使用合适的内容)
<v-img></v-img>
完成后,你就可以看到本文件中插入的新的一个组件了。