件与使用组件的三大步1、定义组件(创建组件)2、注册组件①局部注册②全局注册

3、使用组件小案例

使用组件的一些注意点1.关于组件名2.关于组件标签3.一个简写方式

组件的嵌套VueComponent构造函数一个重要的内置关系单文件组件

传统方式编写缺点

使用Vue.extend(options)创建其中options和new

Vue(options)时传入的那个options几乎一样但也有点区别

区别如下

最终所有的组件都要经过一个vm的管理由vm中的el决定服务哪个容器。

备注使用template可以配置组件结构。

2data必须写成函数为什么

避免组件被复用时数据存在引用关系比如我父组件要多次复用一个子组件那如果其中一个子组件做了修改数据操作其他复用的地方数据也会被修改。

如果某个组件中的data写成对象形式且组件内有对数据的操作那么该组件在多次复用时每次点击某一个按钮其他组件实例的数据都会改变这样是不行的。

2、注册组件

idrootxuexiao/xuexiaohrxuesheng/xuesheng/divscript//第一步:创建school组件const

school

//可以使用name配置项指定组件在开发者工具中呈现的名字(只是开发者工具里用的名字)。

//

el:

divh2学校名字{{schoolName}}/h2h2学校地址{{address}}/h2/div,data()

{return

divh2学生名字{{studentName}}/h2h2学生年龄{{age}}/h2button

clickadd点击年龄1/button/div,data()

{return

{this.age;}},})//创建一个vm带领小弟接管root容器const

new

{//组件名:组件//这里最好写成school:school,简写为schoolxuexiao:

school,//这里最好写成student:student,简写为studentxuesheng:

!--

idroot2sayhello/sayhello/divscript//第一步:创建组件const

hello

world}}})//第二步:全局注册组件Vue.component(sayhello,

new

直接写组件名的标签就可以一般我们定义组件时组件名和定义的名字最好一样这样就可以简写。

!--

idrootxuexiao/xuexiaoxuesheng/xuesheng/div小案例

!DOCTYPE

src../js/vue.js/script/headbodydiv

idroot!--

divh2学校名称{{schoolName}}/h2h2学校地址{{address}}/h2/div,data()

{return

divh2学生姓名{{studentName}}/h2h2学生年龄{{age}}/h2/div,data()

{return

(1).组件名尽可能回避HTML中已有的元素名称例如h2、H2都不行。

(2).可以使用name配置项指定组件在开发者工具中呈现的名字不影响注册的名字。

2.关于组件标签

这里要注意vm里要写el其他都不写。

vm里的template可以不用写根节点因为vm里的东西是放到容器里的而组件的template要用根节点包起来如div。

注意创建组件时要先创建子组件才能创建父组件。

案例仔细看看代码观察如何实现嵌套

src../js/vue.js/script/headbodydiv

idroot!--

divh2学生姓名{{studentName}}/h2h2学生年龄{{age}}/h2/div,data()

{return

divh2学校名称{{schoolName}}/h2h2学校地址{{address}}/h2student/student/div,data()

{return

欢迎大家一起学习Vue,};},});//创建app组件const

app

divhello/helloschool/school/div,components:

创建vmnew

组件是一个Vue.extend生成的构造函数当组件写到页面上时Vue开始解析同时自动new了一下这才创建了组件的实例对象

school组件本质是一个名为VueComponent的构造函数且不是程序员定义的是Vue.extend生成的。

我们只需要写school/或school/schoolVue解析时会帮我们创建school组件的实例对象即Vue帮我们执行的new

特别注意每次调用Vue.extend返回的都是一个全新的VueComponent构造函数而不是返回VueComponent的实例这个地方不要陷入误区只有当Vue解析组件时才会返回所对应组件如school的VueComponent的实例对象

VueComponent的实例对象以后简称vc也可称之为组件实例对象。

Vue的实例对象以后简称vm

组件配置中data函数、methods中的函数、watch中的函数、computed中的函数。

它们的this均是【VueComponent实例对象】。

new

Vue(options)配置中data函数、methods中的函数、watch中的函数、computed中的函数

1、一个重要的内置关系VueComponent.prototype.__proto__

Vue.prototype

为了确保vue开发者工具里的名称和组件名称一致组件命名最好采取首字母大写形式如下面案例School.vueStudent.vueApp.vue

School.vue

clickshowName点我提示学校名称/button/div

/template//

templatedivSchool/SchoolStudent/Student/div

/templatescript

/title单文件组件的语法/title/headbodydiv

idroot/divscript

src../../js/vue.js/scriptscript

/html