组件基础（面试）

1.全局组件: 组件的属性不能用大写字母 组件的名字可以用驼峰命名法,但是使用的时候必须用连字符 全局注册的组件使用时不能使用单标签(不会报错,但是只能使用一次 多次使用只显示第一个)

注册的组件不要跟系统标签同名

2.局部组件: 一个vm实例可以有多个局部组件,但是只能供当前vm实例使用

3.单文件组件:

引入:@1官方脚手架 @2挂载vm对象 @3组件引入并渲染到vm中

单文件组件也有全局组件和局部组件 只是把一个组件单独写在一个.vue文件中,供别的组件引入然后注册 引入文件时:一般使用相对路径 上一下用../ 同级使用./ 下级使用/ @ 代表src文件夹

<div id="app">
            <nav1 son-proprety="子组件使用时属性传进去的值"></nav1>  
            <content1 img2src="./img/2.png"></content1>
        </div>
        
        <div id="app2">
            <nav1 son-proprety="子组件使用时属性传进去的值2"></nav1>
            <content1 img2src="./img/2.png"></content1> 
        </div>
        <script type="text/javascript">
           //祖册全局组件
            Vue.component("nav1",{
                data(){return {sondata:"子组件的数据"}},
                template:`<div><h1>{{sondata}}</h1><p>{{sonProprety}}</p></div>`,
                props:["sonProprety"]
            })
            
            
            // let content1={
            //          data(){return {img1:"./img/1.png"}},
            //          template:`<div><img :src="img1"/><img :src="img2src"/></div>`,
            //          props:["img2src"]
            //      }
            
            
            new Vue({
                el:"#app",
                data:{},
                components:{
                    // content1
                    //注册局部组件
                    content1:{
                                data(){return {img1:"./img/1.png"}},
                                template:`<div><img :src="img1"/><img :src="img2src"/></div>`,
                                props:["img2src"]
                            }
                }
            })
            new Vue({
                el:"#app2",
                data:{}             
            })
        </script>

4.组件的属性 属性有两种写法:简单声明和详细描述:

4.1.简单声明 props:["prop1","prop2"]

4.2对属性做详细的描述

props: {
    propA: Number,      // 基础的类型检查 (`null` 匹配任何类型)
    propB: [String, Number],    // 多个可能的类型
    propC: {    type: String,
             required: true // 必填的字符串
    },
    propD: {    type: Number,
            default: 100    // 带有默认值的数字
        },
    propE: {    type: Object,   // 带有默认值的对象或者数组填Array
        default: function () {  // 不建议直接填对象(因为对象直接量会一直占用内存),一般使用工厂函数,调用时才创建对象节省资源(面试)
                return { message: 'hello' }
            }
        },
    propF: {
            validator: function (value) {// 自定义验证函数返回为true就代表数据符合我们规定
            return ['success', 'warning', 'danger'].indexOf(value) !== -1
            }
        }
  }

5.v-slot: 插槽

v-slot: 插槽, 具名插槽 slot,slot-scope过时了 2.6.0使用v-slot 语法:v-slot:插槽名 语法糖:#插槽名 没有指定插槽名就是默认插入到插槽,不给插槽插入数据的话,就会使用组件的slot中的数据 插槽名不用使用引号引起来,直接写变量名 插入的内容必须是template标签或者组件 不能是原生的元素

//设计组件: .vue组件文件中
<template>
<div class="content1">
    <slot></slot>
    <slot name="slot1"></slot>
    <h1>{{contentData.title}}</h1>
    <h2>{{contentData.dt}}</h2>
    <slot name="slot3">你不给我数据到3号插槽中  我就会默认显示出来</slot>
    <p>{{contentData.text}}</p>
    <slot name="slot2"></slot>
​
</div>
</template>
​
<script>
​
export default{
    props:{
        contentData:{
            type:Object,
            default:()=>{return {title:"0",dt:"0",text:"0"}}
        }
    }
}
</script>
​
//使用组件: .vue页面文件中
<template>
<div>  
  <content2 :contentData="arr[1]">
        <template #slot1>
            <img src="../assets/28.jpg">
        </template>
    
        <template #slot2>
            <p>我在外部插入插槽的数据,不是子组件中的数据,也不是属性传进去的数据</p>
        </template>
        
        <template v-slot:slot3>
            666
        </template>         
        <p>我并没有指定插入到哪里</p>
  </content2>
</div>  
</template>
​

6.组件的嵌套

组件的嵌套: .vue文件既可以是一个页面,也可以是一个组件 它可以被别人.vue文件引入 然后作为组件使用

补充:组件的自定义事件和原生事件

//1.在原生组件(就是html标签)中  事件是由系统来设计触发条件的:
<div @click="fn">点我</div>
​
//2.在自定义组件中,事件是由自己来设计什么时候触发的:
​
//绑定事件:
<mydiv @myclick="fn">点我</mydiv>
​
//事件设计:
//在mydiv组件内部,你可以在你想要的条件下去触发事件
this.$emit("myclick","要给触发的事件的函数传入值")//这个代码放在你想触发自定义事件的地方
​
​
//3.如果希望组件绑定原生事件(事件的触发条件设计由系统设计)
//给事件绑定事件修饰符   .native
<mydiv @click.native="fn">点我</mydiv>//事件名必须是系统存在的事件
​

7.面试题（组件基础）

组件中的基础语法常见的面试题方向:

7.1 @ 是一个关键字,在引入的文件路径中 它代表src目录

7.2 template:组件的模板中只能有一个根节点

7.3 v-slot: 插槽, 具名插槽 slot,slot-scope过时了 2.6.0使用v-slot 语法:v-slot:插槽名 语法糖:#插槽名 没有指定插槽名就是默认插入到插槽,不给插槽插入数据的话,就会使用组件的slot标签的尖括号中的数据 插槽名不用使用引号引起来,直接写变量名 插入的内容必须是template标签或者组件 不能是原生的元素

7.4 组件的data为什么是个函数然后返回对象,以前使用vm时都是个对象

组件和挂载到界面的vm对象的区别，vm挂载到页面上时，触发了钩子函数的，data生成了，页面上使用的数据就是data容器中渲染上去的，而且页面只有一个vm对象，所以的vm生成完毕(mouted)时data必须存在

组件是引入和注册以后不一定使用的，比如for循环0次就是组件对象生成了的，但是使用0次，所以组件对象并没有使用自己的data容器去渲染数据，造成资源浪费，解决方案就是懒加载：当使用data时去调用，才生成data对象

组件的data 设计成function的用义:组件可以多次使用,每使用一次,函数被调用一次则创建出不同的数据对象,实现同名组件的数据可以相互独立

7.5 scoped: style标签的scoped="scoped" 生成css的使用作用域只有当前组件内部的选择器生效