vue（五）

组件

• 全局组件
  • 组件的属性不能使用大写字母
  • 组件的名字可以使用驼峰命名法，但是使用的时候必须用连字符
  • 全局注册的组件使用时不能使用单标签（不会报错，但是只能使用一次，多次使用只显示第一个）
  • 注册的组件不要跟系统同名
• 局部组件
  • 一个vm实列可以有多个局部组件，但是只能供当前vm实列使用
• 单文件组件
  • 引入
    • 用官方的脚手架搭建环境
    • 挂载vm对象、
    • 组件引入并渲染到vm中
  • 单文件组件也有全局组件和局部组件
    • 只是把组件单独写在一个.vue文件中，共别的组件引入然后注册
    • 引入文件是；一般使用相对路径 上一下用…/ 同级用./ 下级使用/ @表示src文件夹

组件的属性

• 简单声明

  props:["prop1","prop2"]
  

• 详细描述

  props:{
  	prop1:Number,//基础的类型检查
      pros2:[String,Number],多个可能的类型
      prop3:{
          type:String,//字符串类型
          required:true//必填
      	}，
      prop4:{
          type:Number,//数字类型
              default:100//默认值为100
      	}，
      prop5：{
          type:Object,//带有默认值的对象或者数组填Array
          default：function(){//不建议直接填写对象(因为对象直接量化占用内存)，一般使用工厂函数，调用是才创建对象节省资源
  			return {message:'hello'}
          	}
      	},
      prop6:{
          validator:function(value){//定义验证函数返回值为true表示数据符合我们的要求
              return ['success','warning','danger'].indexOf(value)!==-1
          	}
      	}
  	}
  

插槽

• 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>
    
    

组件的嵌套

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

补充

• 组件的自定义事件和原生事件

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