一、自定义组件与HTML标签
1.组件的名称
定义组件名的方式有两种:
一:使用kebab-case(短横线分隔命名):my-component-name
当使用kebab-case定义一个组件时,必须在引用这个这个自定义元素时使用kebab-case
例如
二:使用PascalCase(首字母大写命名):MyComponentName
当使用PascalCase定义一个组件时,在引用这个自定义元素时两种命名法都可以使用。
也就是说和都是可接受的。
开发建议:
组件命名时用首字母大写命名法:DemoLogin
组件使用时用短横线分隔命名法:
2.组件的内容
我们发现给组件写内容,默认不会改变组件显示的内容
这就需要我们学习slot插槽。
【slot--基本使用】
当我们封装了一个组件,这个组件有个区域我不想写死,那就可以写插槽(slot)
语法:在我不想写死的地方写<slot />
外界接收的语法:
<组件>传递的内容</组件>
slot的具名插槽:
<!--
slot的具名插槽:
什么叫具名插槽? => 就是有名字的插槽
为什么要用具名插槽? => 因为一个组件里可能有多个地方不想写死
命名语法:
<slot name='名字'>默认值</slot>
使用语法:{依赖template包裹,并且用v-slot指定插槽名字}
<template v-slot:插槽名>
要传递的内容
</template>
简写语法:{把v-slot变成#}
<template #插槽名>
要传递的内容
</template>
-->
3.props对象声明
官方推荐用对象方式声明:
props:{
// 基本的类型检查('null' 和 'undefined'会通过任何类型检验)
propA:Number,
// 多个可能的类型
propB:[String,Number],
//这代表propsB可以是String,也可以是Number类型
// 必填的字符串
propC:{
type:Sting,
required:true
//这代表这个type是父组件(就是App.vue)必须填入的,如果传入就会报错
},
// 带有默认值的对象
propE:{
type:Object,
default:function(){//default(默认值)
return{message:'hello'}
}
//如果父组件没有传值进来,我们就有一个默认值({message:'hello'}),
// 但是如果父组件传值进去了,默认值就会取消
},
// 自定义验证函数
propF:{
valiodator:function(value){
// 这个值必须匹配下列字符串中的一个
return['success','warning','danger'].indexOf(value)
}
// 校验规则:function(value:传入的值的意思){
// return 制定规则
// // 如果不满足规则也会报错
// }
}
}
// props声明:一个组件需要显示声明它所接受的props,这样Vue才能知道外部传入的是什么类型的值
//使用props选项来定义:
// 一:使用字符串数组来声明
export default{
props:['name','age']
//但是这样的话,如果传进来的name是一个number数据,
//或者传进来的age是一个string类型,传进来的数值就会是失败,
//所以,更推荐用对象形式传值
props:{
name:String,
age:Number,
}
// 定义了数据类型后,如果给了错误的数据类型,网页就会报错
}
小结:
1.什么属性限制要传递的类型?
type
2.什么属性限制必传?
required设置为true
3.什么属性设置成默认值
default(基本类型直接设置,复杂类型用函数设置)
4.什么设置自定义校验规则
valiodator(这是一个函数,函数有一个参数,参数就是传过来的值)
如果函数里return true代表校验通过,false代表检验失败
4.props单向数据流
[props单向数据流]
概念:父组件的数据改变了会自动流动到子组件,但是子不允许修改由props流过来的数据
所谓的单向数据流不允许子修改,是不允许改栈,但是可以改堆
例如:父传了数据给子,在子里面可以通过调用push,pop,shift,unshift,splice等等
而且改完后,父也会跟着改,因为他们指向的是同一个堆
但是在这里不允许改props上的栈上的数据,父可以改,而且改完后能流入到子。
5.emit
// [$emit]
// 子里如何给父组件传递数据?
// 利用发通知的形式来间接传数据。
// 发通知的语法:this.$emit('自定义的事件名',数据)
// 父里要订阅这个通知(相当于监听这个事件)
// <子组件 @自定义的事件名="函数">
// 当子的$emit执行时,就会自动调用父里绑定的函数,函数的参数就是子传递过来的数据。
// 例:
// 子里的代码
// <button @click="$emit('sb','hello')">点击后,要给父传递数据</button>
// 解释:当子组件里面点了这个按钮,就会触发一个叫sb的事件,那个父组件如果监听了sb就会调用.
// 父里的代码
// <子组件 @sb="函数"/>
// 当sb事件通知时,就会调用上面的函数,函数的参数就是永不过时.
二、全局组件与局部组件
1.局部组件注册及使用
<template>
<div>
<!--
局部组件注册及使用
导入组件
import 组件名 from'路径'
注册组件
export default{
components:{
组件名
}
}
使用组件
<组件名/>
-->
</div>
</template>
<script>
export default {
}
</script>
<style>
</style>
2.全局组件注册及使用
<template>
<div>
<!--
全局组件注册及使用
局部组件:在哪里导入,就只能在哪里使用。
全局组件:导入一次,其他地方都能用。
main.js文件里
导入组件
import 组件名 from'路径'
组册组件
Vue.component('组件名',导入的组件)
-->
</div>
</template>
<script>
export default {
}
</script>
<style>
</style>