一、组件定义
实现应用中局部功能代码和资源的集合 (html、css、javascript、image等),以实现代码的复用,简化项目编码,优化效率
二、组件使用
单文件组件
xxx.vue
<template>
<!--组件的结构 -->
</template><script>
// 组件交互相关的代码(数据、方法...)
</script><style>
/* 组件的样式 */
</style>
非单文件组件
1、创建组件 —— vue.extend(options)
Notice:与创建实例对象(new vue(options))时传入的配置项options有所区别
(vc与vm区别)
1、el不写
2、data为函数式(data(){}),return所有data里的属性
“template”配置组件的框架结构
Example:或简写为const school = { }
//创建一个school组件
const school = Vue.extend({
//el: '#root', //组件定义时,不写el配置项
template: `
<div>
<h2>学校名称:{{ schoolname }}</h2>
<h2>学校地址:{{ address }}</h2>
</div>`,
data() { //函数式
return {
schoolname: "西安市**学校",
address: "**路"
}
}
})
Notice:VueComponent
1、school组件实际上是vue.extend生成的一个名为VueComponent的构造函数(vue自身定义)2、每次调用vue.extend,会生成一个全新的VueComponent()
3、每一个组件标签都会创建一个组件实例对象,会执行new.VueComponent(options)
4、组件配置(data函数、methods里的函数、watch里的函数、computed里的函数)中this指向VueComponent实例对象
2、注册组件
局部注册:创建组件实例时传入components配置项
全局注册:Vue.component('组件名', 组件)
Example:
new Vue({
el: '#root',
//注册组件(局部)
components: {
xuexiao: school
}
})
//注册组件(全局)
Vue.component('xuexiao', school)
组件名通常为单个单词组成 或 多个单词组成(使用“-”或驼峰命名加以区别),组件名尽可能避免html中已有的元素名称。
3、使用组件(写组件标签)
Example:
<div id="root">
<!-- 编写组件标签 -->
<xuexiao></xuexiao>
</div>
也可写做<xuexiao/>(后果:不使用脚手架时,会导致后续组件不可渲染)
嵌套组件:
1、二级组件定义时常规写,级别越小的组件越先定义
2、高级组件的内部components配置项内罗列下级组件名称,且template内部添加下级组件标签
3、组件嵌套时尽可能做到逻辑清晰,层级分明,最好用一个大组件包含。
三、组件案例总结
1、组件化编码流程
(1)拆分静态组件:将一个页面按功能,板块化拆分为一个个具有特定功能集合的组件,注意命名不要与html冲突(例如header ×)
(2)实现动态组件:组件之间的公共数据可以存放在他们共同的父组件身上,非公共数据放在自身即可
(3)实现交互:绑定事件(事件在组件之间进行有效传递)
2、props适用于:
子组件 向 父组件 传递信息,要求父先给子组件一个函数,子组件在调用此函数
父组件 向 子组件 传递信息
3、v-model:绑定的值不可以是props传过的值,由于props传的值不可修改