组件
非单文件组件
组件的定义
向外提供一个局部的效果功能的代码集合(html/css/js/image....)
作用:复用代码,简化项目编码 提高运行效率
组件的创建
分为创建组件,注册组件,使用组件
-
创建组件
//创建school组件 const school = Vue.extend({ template:` <div> <h2>名称:{{schoolName}}</h2> <h2>地址:{{address}}</h2> <button @click="showName">点我提示学校名</button> </div> `, data(){ return{ schoolName:'中南大学', address:'changsha', } }, methods:{ showName(){ alert(this.schoolName) } } })
template中是html项目
data和methods和正常vue中一样
剩余组件创建:
//创建student组件 const student = Vue.extend({ template:` <div> <h2>姓名:{{studentName}}</h2> <h2>年龄:{{age}}</h2> </div> `, data(){ return{ age:18, studentName:'张三' } } }) //创建hello组件 const hello = Vue.extend({ template:` <div> <h2>hello {{name}}</h2> </div> `, data(){ return{ name:'Tom' } } })
-
注册组件
注册全局组件
//注册全局组件 Vue.component('hello',hello)
vm中注册组件
//创建vm new Vue({ el:'#root', components:{ //注册组件(局部注册) //组件名,引用位置 school, student } })
-
使用组件标签
<div id="root"> <school></school> <hr> <student></student> <hello></hello> </div>
-
总结
<!-- vue使用组件的三大步骤 1.定义组件 2.注册组件 3.使用组件 1.如何定义组件 使用Vue.extend(options)创建,其中options和new Vue(options)中几乎一样 区别如下: 1.el不要写,所有组件都要经过一个vm进行管理,由vm中的el决定使用服务哪个 2.data必须写成函数,避免组件被复用时,数据存在引用关系 备注:使用template可以配置组件结构 2.如何注册组件 1.局部注册:new vue时传入components选项 2.全局注册:vue.component('组件名',组件位置) 3.编写组件标签 <组件名></组件名> <school></school> -->
注意点
<!-- 1.关于组件名: 一个单词组成: 首字母小写:school 首字母大写:School 多个单词组成: kebab-case命名:my-school CameCase命名:MySchool(需要vue脚手架支撑) 备注: 1.组件名尽可能回避html中已有的元素名称 2.可以使用name配置项指定组件在开发者工具中呈现的名字 2.关于组件标签 <my-school></my-school> <school/> 备注:不使用脚手架时,<school/>会导致后续组件不能渲染 3.简写方式: const school = Vue.extend(options)可简写为:const school = options -->
组件的嵌套
通常我们会设置一个app组件作为组件的汇总,其余组件在app中注册,app在vue中注册,进行一个嵌套。
如果有组件的嵌套也可以分层
//创建student组件 const student = Vue.extend({ template:` <div> <h2>姓名:{{studentName}}</h2> <h2>年龄:{{age}}</h2> </div> `, data(){ return{ age:18, studentName:'张三' } } })
school中嵌套student组件
//创建school组件 const school = { template:` <div> <h2>名称:{{schoolName}}</h2> <h2>地址:{{address}}</h2> <student></student> </div> `, data(){ return{ schoolName:'中南大学', address:'changsha', } }, components: { student } } //创建hello组件 const hello = Vue.extend({ template:` <div> <h2>hello {{name}}</h2> </div> `, data(){ return{ name:'Tom' } } })
app组件中汇总所有组件信息,其中student已经在school中注册
最后在vue中注册app组件
//创建app组件 const app ={ template:` <div> <hello></hello> <school></school> </div> `, components:{ school, hello } } new Vue({ el:'#root', components:{ //命名 app } })
并在html中显示app,其余组件都可以正常显示
<div id="root"> <app></app> </div>
关于VueComponent
<!-- 关于vuecomponent: 1.school组件本质是一个名为vuecomponent的构造函数,且不是程序员定义的,是vue.extends生成的 2.我们只需要写<school></school>或者<school/>,vue解析时会帮我们创建school组件的实例对象 vue帮我们执行的:new vuecomponent(options) 3.每次调用vue.extend,返回的都是一个全新的vuecomponent 4.关于this指向 1.组件配置中: data,methods,watch等this均是vuecomponent实例对象 2.new Vue()中 data,methods,watch等this均是vue实例对象 5.vuecomponent的实例对象简称vc vue实例对象简称vm -->
内置关系
console.log(school.prototype.__proto__ === Vue.prototype)
over
标签:school,Vue,const,app,非单,day71,组件,data From: https://www.cnblogs.com/GUGUZIZI/p/17108226.html