组件基础
组件的作用
组件是可复用的vue实例，且带有一个名字。
组件就是我们自定义的一个元素
但是要注意的是：必须用在vue的模版中使用
全局组件
全局组件挂载：实例化一个vue对象，建立一个组件，然后挂载
注意下面代码有个data函数，此函数是专门用来给模板里面传输数据的
<div id="app">
<hc-c></hc-c>
</div>
<script>
Vue.component('hc-c',{
data(){
return {
count:0
}
},
template:`
<button @click="count++">你点了我{{ count }}</button>
`
})
let vm = new Vue({
el:"#app",
})
</script>
局部组件
局部组件挂载：先建立一个组件，通过实例化的vue对象的components属性来挂载
<div id="app">
<hc-c></hc-c>
</div>
<script>
let hcc={
data(){
return {
count:0
}
},
template:`
<button @click="count++">你点了我{{ count }}</button>
`
}
let vm = new Vue({
el:"#app",
components:{
"hc-c":hcc
}
})
</script>
prop属性
作用： 捕获组件的属性
需要注意的是：template模板只能有一个根标签，所以用div框起来
下述代码通过proprs捕获zyl-new上的两个属性，然后template里面调用，最终替换zyl-new，渲染页面
<body>
<div id="father">
<zyl-new
url= "https://dss1.bdstatic.com/70cFuXSh_Q1YnxGkpoWK1HF6hhy/it/u=1896307544,583046469&fm=26&gp=0.jpg"
title= "壁纸一"
></zyl-new>
</div>
<script>
Vue.component('zyl-new',{
props:['url','title'],
template:`
<div>
<img :src="url" alt="">
<span>{{ title }}</span>
</div>
`
})
let vm=new Vue({
el:"#father"
})
</script>
</body>
循环嵌套
下述代码通过给zyl-new标签绑定一个属性，此属性在实例化的Vue的data里面是定义了的，那么此时的zyl-new便获取到了data里面的数据，保存在vl属性里。第一个组件便通过props捕获数据再通过v-for循环得出两个组件并给每个组件加上属性。第二个组件则再去捕获第一个组件遍历出的两个标签，达到效果。
<body>
<div id="father">
<zyl-new :vl='vl'></zyl-new>
</div>
<script>
//第一个组件
Vue.component('zyl-new', {
props: ['vl'],
template: `
<div>
<zyl-Son :ur="item.ur" :tit="item.tit" v-for="item in vl">
</zyl-Son>
</div>
`
})
//第二个组件
Vue.component('zyl-Son', {
props: ['ur', 'tit'],
template: `
<div>
<img :src='ur' alt="">
<span>{{ tit }}</span>
</div>
`
})
let vm = new Vue({
el: "#father",
data: {
vl: [
{
ur: "https://dss1.bdstatic.com/70cFuXSh_Q1YnxGkpoWK1HF6hhy/it/u=1896307544,583046469&fm=26&gp=0.jpg",
tit: "壁纸一"
},
{
ur: "https://dss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=3394484960,2663273820&fm=26&gp=0.jpg",
tit: "壁纸二"
}
]
}
})
</script>
</body>
组件属性驼峰命名
可以看到zyl-new标签有个属性：title-new。而我们可以在props将其-省略并将N大写，可以达到一样的效果。
<body>
<div id="father">
<zyl-new
title-new= "壁纸一"
></zyl-new>
</div>
<script>
Vue.component('zyl-new',{
props:['titleNew'],
template:`
<div>
<span>{{ titleNew }}</span>
</div>
`
})
let vm=new Vue({
el:"#father"
})
</script>
</body>
prop验证
作用： 当数据格式不符合条件时，会报错，但程序不会终止运行
<body>
<div id="father">
<zyl-new
:title-new= "test"
></zyl-new>
</div>
<script>
Vue.component('zyl-new',{
props:{
titleNew:String
},
template:`
<div>
<span>{{ titleNew }}</span>
</div>
`
})
let vm=new Vue({
el:"#father",
data:{
test:123
}
})
</script>
</body>
可以看到程序报错，但123出来了
绑定多个验证
props:{
titleNew:[String,Number]
}
required
作用：可以使用required选项来声明这个参数是否必须传入，如果没有属性传入便会报错。
props: {
fooMessage: {
type: Number,
required: true
}
}
此处的type是绑定数据类型
default
作用：使用default选项来指定当父组件未传入参数时props变量的默认值
props: {
fooMessage: {
type: Number,
default: 128
}
}
validator
当校验规则很复杂，默认提供的校验规则无法满足的时候可以使用自定义函数来校验。
非 prop 特性
所谓非 prop 特性，就是指它可以直接传入组件，而不需要定义相应的 prop。
尽管为组件定义明确的 prop 是推荐的传参方式，组件的作者却并不总能预见到组件被使用的场景。所以，组件可以接收任意传入的特性，这些特性都会被添加到组件的根元素上。
<div id="father">
<zyl-mew type="radio" class="one" style="color: red;"></zyl-mew>
</div>
<script>
Vue.component('zyl-mew',{
template:`
<div>
<input/>
我是组件
</div>
`
})
let vm=new Vue({
el:"#father"
})
</script>
可以看到上述代码没有通过prop去捕获对应的属性，而自定义标签上的属性直接传递到了模板的根节点上了。
prop特性禁用特性继承
当我们不想让属性继承到根节点时，可以通过inheritAttrs: false结合$attrs来操作属性
$attrs：获取标签中除class和style之外的标签上的属性。
inheritAttrs: false 禁用特性继承
<div id="father">
<zyl-mew abc="123" type="radio" class="one" style="color: red;"></zyl-mew>
</div>
<script>
Vue.component('zyl-mew',{
// props:["type"],
inheritAttrs: false,
template:`
<div>
<input v-bind="$attrs"/>
我是组件
</div>
`
})
let vm=new Vue({
el:"#father"
})
</script>
