Vue.js中使用components组件的实例讲解
作者：美奇开发工作室
这篇文章主要介绍了Vue.js中使用components组件的实例讲解，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
Vue.js使用components组件
组件（vue文件）的结构
<!--页面模板-->
<template>
<div> {{msg}}</div>
</template>
<!--JS 模块对象-->
<script>
export default {
data () {
return {msg: 'vue模板页'}
}
}
</script>
<!--css样式-->
<style>
</style>组件的基本使用
- 引入组件
- 映射成标签
- 使用组件标签
<template>
<!--3.使用组件标签-->
<HelloWorld/>
</template>
<script>
//1.引入组件
import HelloWorld from './components/HelloWorld.vue'
export default {
//2.映射组件标签
components: {
HelloWorld
}
}
</script>vue定义组件 components（局部 / 全局）
基本信息
组件是对你 html 标签的一个拓展
组件里面的内容就是你模板的内容
组件分为全局组件和局部组件
对象当中定义的组件都是局部组件
如何定义（注册）组件
- 定义组件需要使用components选项。components是一个对象，该对象的属性是组件的相关配置信息。
- 组件当中至少应该拥有template属性或render方法。
- 使用时，可以将组件的名字作为标签来使用。
注意：
当你的组件名称当中使用驼峰命名时，在使用组件时，名字小写与大写之间应该用-来分割。
组件当中的数据，与其外部的实例是不共享的。
在组件内定义的数据（data)
- 必须要是一个函数
- 函数必须要有返回值
- 返回值必须要是一个对象
局部组件
<Zujian></Zujian> // html 中可以使用已经定义好的组件
new Vue({
el:"#root",
data:{
... ...
},
components:{ //可以看到 components 是复数形式，说明我们可以在这里面定义多个组件
Zujian:{ //定义了一个名字为 zujian 的组件 //它是一个对象形式
template:`<div>定义了一个组件，名字为 zujian </div>` //组件具体内容
}
}
})全局组件
Vue.component('Zujian', { //在 new Vue 之外书写 // script 中书写
template: `<div>定义了一个组件，名字为 zujian </div> `
})<Zujian></Zujian> // html 中可以使用已经定义好的组件
引入外部组件
//引入外部组件
<script>
import Zujian from './components/zujian.js'
export default{
data(){
return{
... ...
}
},
components:{
Zujian
}
}
</script>//外部组件 <template> <div>hello world！！！</div> <template> <script> ... ... </script>
总结
以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。