第1节vue入门-笔记组件化实践

掌握Vue组件化常用技能够设计并实现多种类型的组件组件递归渲染nodevuejsvue-cli组件组件化是vu的思想，它能提高开发效率，方便重复使用，简化调试步骤，提升整个项目的可性，便于多人协同开发父组件=>子组属性///child：并未在props 子元素子元素不保证顺子组件=>父组件：自定义thisthis.$parent.$on('foo',祖先和后代之

API完成该任意两个组件之间：事件总线或////Bus：事件派发 和回调管this.callbacks[name].forEach(cb=>this.$bus.$on('foo',范例：组件通 插槽语法是Vue实现的内容分发API，用于复合组件开发。该技术在通用组件库开发具名<template<templatev-slot:default>具名插槽<templatev-slot:content>内容作用域插分发内容要用到子组件中的<!--<!--把v-slot的值指定为作用域上下文对象来自子组件数据范插槽相关范例请参考components/slots组件化实实现Form、FormItem、创建<input<input:value="value"@input="onInput"v-创建components/form/index.vue<h3><h3>KForm表单<k-inputv-model="model.username"></k-<k-inputtype="password"v-model="model.password"></k-创建components/form/index.vue，添加<h3><h3>KForm表单<k-form-itemlabel="用户名"<k-inputv-model="model.username"></k-</k-form-<k-form-itemlabel="确 "<k-inputtype="password"v-model="model.password"></k-</k-form-formform:this//components/form/index.vue，添加<h3><h3>KForm表单<k-form:model="model":rules="rules"this.$refs['loginForm'].validate(valid{alert("请求登录alertalert("数据mountedmounted(){/校验事//获取对应FormItem校验规安装async-validator：npmiasync-validator-////获取对应FormItem校验规//返回Promise，没有触发catch就说明验证通//调用所有含有prop属性的子组件的validate方法并得到Promise//弹窗这类组件的特点是它们在当前vu实例之外独立存在，通常挂载于body；它们是通过JS需要在任何组件中。常见使用：create////创建函数接收要创建//创建一个Vue//render函数将传入组件配置对象转换为虚拟}).$mount();////给组件实例添加销毁方通知<divclass="box"v-<pclass="box-{props:{title:default:""{default:""{}{return{isShow:{)this.isShow=true;setTimeout(this.hide,this.duration);hide()this.isShow=false;}}.boxposition:

box-sizingbox-sizing:border-margin-bottom:使用create<Node<Node:data="{id:'1',title:'递归组件实现Item组使<div<div<itemclass="item"importItemfrom"./Item.vue";exportdefault{{return{treeData:title:"Web全栈架构师",children:[{title:"Java架构师{title"JS高级",children:[{title:{title:"动效}]{title"Web全栈",children:[{title: expand:true,c