组件
- 全局组件
- 组件的属性不能使用大写字母
- 组件的名字可以使用驼峰命名法,但是使用的时候必须用连字符
- 全局注册的组件使用时不能使用单标签(不会报错,但是只能使用一次,多次使用只显示第一个)
- 注册的组件不要跟系统同名
- 局部组件
- 一个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>//事件名必须是系统存在的事件