做网站英文,高港区企业网站建设,个人企业邮箱登录入口,网站之家app组件注册
组件注册有两种方式#xff1a;
全局注册 可以使用Vue应用实例的.component()方法#xff0c;让组件在当前Vue应用中全局可用#xff0c;.component()方法可以被链式调用。全局注册的组件可以在此应用的任意组件的模版中使用。import { createApp } from vue
imp…组件注册
组件注册有两种方式
全局注册 可以使用Vue应用实例的.component()方法让组件在当前Vue应用中全局可用.component()方法可以被链式调用。全局注册的组件可以在此应用的任意组件的模版中使用。import { createApp } from vue
import { MyComponent } from ./MyComponent.vueconst app createApp({
})
app.component(MyComponent,MyComponent) 局部注册 局部注册的组件需要在它的父组件中显示导入并且只能在父组件中使用依赖关系更加明确。script
import MyComponent from ./MyComponentexport default{components:{MyComponent}
}
/scripttemplateMyComponent /
/templatesProps
一个组件需要显示声明它所接受的props。声明props的方式有两种
字符串数组export default{props:[animal,zoo],created(){//props 会暴露到 this 上console.log(this.animal);console.log(this.zoo);}
}对象的形式export default{props:{title:string,age:number}
}静态Prop、动态Prop
静态Prop传参形式child-component titlethis is title /动态Prop传参形式使用v-bind或缩写:来进行动态绑定child-component :title自定义的变量/事件
触发与监听事件
触发子组件在组件模版表达式中可以直接使用$emit方法触发自定义事件//1. 第一种触发方式
button click$emit(click)触发click事件/button
//2. 第二种触发方式函数触发 this.$emit
export default{methods:{submit(){this.$emit(click);}}
}父组件可以通过v-on或来监听事件//1. 触发
child-component clickalert(1) /
//2. 事件监听器也支持 .once 修饰符
child-component click.oncealert(1) /事件参数 可以给触发的事件传入参数父组件可以处理传入的参数
子组件传入参数button clickemit(click,1,2)传入参数给父组件/button父组件处理参数child-component clickfun1///处理参数的方法
methods:{fun1:function(var1,var2){console.log(var1);console.log(var2);}
}插槽 Slots
父组件传入插槽内容可以是任意合法的模版内容不局限于文本可以传入多个HTML元素甚至组件child-component传入内容
/child-component子组件插槽占位h1slot/slot
/h1插槽渲染作用域 插槽可以访问到父组件的数据作用域因为插槽内容本身是在父组件中定义的。插槽无法访问子组件的数据。
插槽默认内容 如果父组件没有提供任何内容可以为插槽指定默认内容
buttonslot默认内容/slot
/button具名插槽
子组件为插槽指定名称没有提供name的slot会隐式地命名为defaultdivslot nameheader/slotslot namefooter/slotslot/slot
/div 父组件指定插槽名称传入内容v-slot简写#child-componenttemplate #headerThis is header/templatetemplate #footerThis is footer/templatetemplate #defaultThis is default/template
/child-component动态插槽名 可以使用动态的插槽名传给子组件内容
child-componenttemplate v-slot:[defineSlotName]/templatetemplate #[defineSlotName]/template
/child-component作用域插槽 某些场景下插槽的内容想要同时使用父组件域内和子组件域内的数据子组件可以在渲染时将一部份数据提供给插槽
默认插槽//子组件插槽插入数据
divslot :namezqq :age18/slot
/div
//父组件使用
child-component v-slotvslot{{ vsolt.name }} {{ vsolt.age }}
/child-component具名作用域插槽//子组件插槽传入数据name是vue特别保留的attribute不会作为props传递给插槽
slot nameheader messagehello
/slot
//父组件使用
child-componenttemplate #headerdata{{ data s}}/template
/child-component依赖注入
一个父组件相当于其所有的后代组件会作为依赖提供者。任何后代的组件树无论层级多深都可以注入由父组件提供给整条链路的依赖。关键字provide和inject。
provide提供为后代组件提供数据//为后代组件提供数据
export default{privode:{message:hello}
}
//为后代组件提供data()定义的数据属性以函数形式使用provide
export default{data(){return{message:hello}},provide:(){return{message:this.message;}}
}//在应用层为全部组件提供依赖
import { createApp } from vueconst app createApp({})
// message是注入的名称hello是值
app.provide(message,hello);Inject注入子组件注入父组件隔代父组件也可以提供的依赖export default{inject:[message],data(){return{//注入会在组件自身状态之前被解析可以通过this访问注入的值localMessage:this.message}}
}注入别名和默认值
export{inject:{// localMessage是自定义的本地别名后续访问注入的内容使用this.localMessagelocalMessage:{from:message,default:default //可以指定默认值}}
}和响应式数据配合使用 为了保证注入方和供给方之间的响应性链接需要使用computed()函数提供一个计算属性
import default{data(){return{message:hello}}provide(){return{message:computed(() this.message)}}}
}异步组件
在大型项目中我们可能需要拆分应用为更小的块并仅在需要时再从服务器加载相关组件Vue提供了defineAsyncComponent方法来实现
const AsyncComp defineAsynComponet(() {return new Promise(() {//...从服务器获取组件resolve(/*获取到的组件*/);})
})导入Vue单文件组件
import { defineAsyncComponent } from vueconst AsyncComp defineAsyncComponent(() import(./components/MyComponent.vue))最后得到的AsyncComp是一个外层包装过的组件仅在页面需要它渲染时才会调用加载内部实际组件的函数。它会将受到的props和插槽传给内部组件所以可以使用这个异步的包装组件无缝地替换原始组件同时实现延迟加载。
异步组件注册
全局注册app.component(MyComponent,defineAsyncComponent(() import(./components/MyComponent.vue))局部注册script
impoty { defineAsyncComponent } from vueexport default{components{MyComponent:defineAsyncComponent(() import(./components/MyComponent.vue))}
}
/script加载与错误状态
const AsyncComp defineAsyncComponent({//加载组件函数loader:() import(,MyComponent),//展示加载组件的延迟时间默认200msdelay:200,//加载失败后展示的组件errorComponent:ErrorComponent,//加载组件超时时间默认没有超时时间如果超市会显示 加载失败展示的组件timeOut: 3000
})
