VUE-组件 component
- 一.定义
- 二.组件的使用
-
- 1.定义组件
- 2.组件的分类
-
- 3.template的三种写法
-
- -1.字符串模板写法
- -2.(使用script元素）HTML5标准之前的写法
- -3.（使用template元素）HTML5标准之后的写法【第二种的升级版】
- 三.组件间的关系
- 四.不同组件之间的通信
-
- 1.父向子通信
-
- 2.子向父通信
-
- 3.兄弟组件传参
- 4.另外三种不常用通信 （用于面试）
-
- ref 通信
- $children $parent
- provide inject
- 五.插槽
-
一.定义
使开发者根据自己的需求,扩展 HTML 元素，封装可重用的代码。有利于修改代码,提高了代码的易用性
二.组件的使用
1.定义组件
组件也是Vue实例,因此就有了data、method、computed、watch等属性。组件的命名通常是大驼峰（CaBa）或者是下划线(ca-ba)
的命名方式。
teplate属性是组件中至关重要的一环,它表示组件是以何种元素组成
例如:
const CommonHead={
template:`
CommonHead组件
`
}
其中需要注意的是:由于组件复用的关系,导致每个组件的data必须保持各自独立,因此凭借闭包的原理我们可以得到的结果是data必须
是一个function函数。
例如:
const CommonHead={
template:`
CommonHead组件
word:{{word}}
`,
data () {
return{
word:'a'
}
}
}
2.组件的分类
依据挂载位置的不同,组件的作用域也不同,因此就有了全局组件和局部组件之分。
全局组件
Vue.component('组件的名称',组件对象)
局部组件
const Logo={
template:`
我是logo组件
`
}
const CommonHead={
template:`
CommonHead组件
`,
component:{
Logo
}
}
3.template的三种写法
-1.字符串模板写法
直接写在vue构造器里,这种写法比较直观,适用于html代码不多的场景,但是如果模板里html代码太多,不便于维护,不建议这么写.
new Vue({
el: "#app",
template: '\
{{message}}
\
',
data: {
message: '字符串拼接'
}
})
-2.(使用script元素）HTML5标准之前的写法
new Vue({
el: "#app",
template: '#tem',
data: {
message: '使用script元素写template'
}
})
-3.（使用template元素）HTML5标准之后的写法【第二种的升级版】
{{message}}
new Vue({
el: "#app",
template: '#tem',
data: {
message: 'HTML5中的template标签 ,注意：
template是HTML5中的标签，
不是自定义标签，
也不是Vue中的组件
MDN-docs：https://developer.mozilla.org/zh-CN/docs/Web/HTML/Element/template '
}
})
三.组件间的关系
由于组件间的嵌套使用，组件互相有了关系:父子、兄弟、无关系
四.不同组件之间的通信
1.父向子通信
props通信
子组件中 新增props属性，属性值，时数组，数组中 放 待接收参数列表（定义参数名字）
注意：
1.props中定义的参数名会自动 编译成 实例（组件），属性（同data中的属性以及计算属性中的属性）
2.props名字不能和data中以及methods和计算属性， 不能重名的
//子组件
let CTitle = {
props: ['title','arr'],
template:'#title',
}
//父组件
let Home = {
template: '#home',
data () {
return {
title: '我是home页',
arr: [1,2,3,4],
}
},
components: {
CTitle
}
}
props验证
对于props类型做了验证
type
required
default
props:{
propa:String, //只验证type(类型)可以直接写类型预定义的值
propb:[String,Number] //type是多个类型中的一个 []
propc:{
type:String,
required:true
},
propd:{
type:String,
default:'xxx'
}
}
注意：
1.props中定义的参数名会自动 编译成 实例（组件），属性（同data中的属性以及计算属性中的属性）
2.props名字不能和data中以及methods和计算属性， 不能重名的
3.如果默认值是 数组或者对象，需要一个函数返回这个默认值
4.props能否被改变 props保持 单向的 父向子 （子不能改变），易于维护
type的值：
String
Number
Boolean
Array
Object
Date
Function
Symbol
2.子向父通信
自定义事件 触发
子组件中
this.$emit("自定义事件名",携带参数)
在父组件中
<子组件
@自定义事件="fn"
>
{
methods:{
fn(msg){ //msg 携带数据
// 当子组件的 $emit触发时 自动调用
}
}
}
3.兄弟组件传参
事件总线
Vue实例
$emit("自定义事件",携带参数)
$on("监听的事件名",fn)
注意：
谁emit就由谁on监听
利用第三方实例，
emit
和
on监听
4.另外三种不常用通信 （用于面试）
ref 通信
在父组件的
this.$refs.child 就是这个子组件实例
注意：
不建议直接通过ref操作子组件
$children $parent
$children 组件中 获取当前组件所有的子组件 （数组）
$parent 获取当前组件的父组件
provide inject
父组件中
{
provide:{
msg:'1234',
num:12
},
data,
template,
methods
}
子组件中
{
inject:['msg','num']
// 挂载到了 子组件的 实例的 属性上 注意不要和data或者props或者计算属性或methods重名
}
五.插槽
占位符
