淘宝客网站免费建设/南昌seo全网营销

1. 基本信息

组件是对你 html 标签的一个拓展

组件里面的内容就是你模板的内容

组件分为全局组件和局部组件

• 对象当中定义的组件都是局部组件

2. 如何定义（注册）组件

1. 定义组件需要使用components选项。components是一个对象，该对象的属性是组件的相关配置信息。
2. 组件当中至少应该拥有template属性或render方法。
3. 使用时，可以将组件的名字作为标签来使用。

注意：

• 当你的组件名称当中使用驼峰命名时，在使用组件时，名字小写与大写之间应该用-来分割。
• 组件当中的数据，与其外部的实例是不共享的。
• 在组件内定义的数据（data)
  1. 必须要是一个函数
  2. 函数必须要有返回值
  3. 返回值必须要是一个对象

1. 局部组件

<Zujian></Zujian>  // html 中可以使用已经定义好的组件

new Vue({el:"#root",data:{... ...},components:{     //可以看到 components 是复数形式，说明我们可以在这里面定义多个组件Zujian:{         //定义了一个名字为 zujian 的组件  //它是一个对象形式template:`<div>定义了一个组件，名字为 zujian </div>`    //组件具体内容}}
})

2. 全局组件

Vue.component('Zujian', {    //在 new Vue 之外书写 // script 中书写template: `<div>定义了一个组件，名字为 zujian </div> `
})

<Zujian></Zujian>  // html 中可以使用已经定义好的组件

3. 引入外部组件

//引入外部组件
<script>
import Zujian from './components/zujian.js'export default{data(){return{... ...}},components:{Zujian}
}
</script>

//外部组件
<template><div>hello world！！！</div>
<template><script>... ...
</script>