1. 基本信息
组件是对你 html 标签的一个拓展
组件里面的内容就是你模板的内容
组件分为全局组件和局部组件
- 对象当中定义的组件都是局部组件
2. 如何定义(注册)组件
- 定义组件需要使用
components
选项。components是一个对象
,该对象的属性是组件的相关配置信息。 - 组件当中至少应该拥有template属性或render方法。
- 使用时,可以将组件的名字作为标签来使用。
注意:
- 当你的组件名称当中使用驼峰命名时,在使用组件时,名字小写与大写之间应该用-来分割。
- 组件当中的数据,与其外部的实例是不共享的。
- 在组件内定义的数据(data)
- 必须要是一个函数
- 函数必须要有返回值
- 返回值必须要是一个对象
- 局部组件
<Zujian></Zujian>// html 中可以使用已经定义好的组件
newVue({
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 Zujianfrom'./components/zujian.js'exportdefault{data(){return{......}},
components:{
Zujian}}</script>
//外部组件<template><div>hello world!!!</div><template><script>......</script>