小白浅学Vue3（中）：https://developer.aliyun.com/article/1431692
传递数组，对象
Parent.vue
<template> <h3>Parent</h3> <input v-model="msg"> <Child :title="msg" test="数据" :names="names" :user="user" :number1="number1"/> </template> <script> import Child from './Child.vue'; export default{ data(){ return{ msg:"", names:["张三","李四","王五"], user:{ name:"张三", age:20 }, number1:123 } }, components:{ Child } } </script>
Child.vue
<template> <h3>Child</h3> <p> {{ title }} </p> <p>{{ test }}</p> <p v-for="(name,index) of names" :key="index">{{ index }} : {{ name }}</p> <p>{{ user.name }} {{ user.age }}</p> </template> <script> export default{ data(){ return{ } }, //接收数据 props:["title","test","names","user"] } </script>
传递对象
类型验证
<template> <h3>Child</h3> <p> {{ title }} </p> <p>{{ test }}</p> <p v-for="(name,index) of names" :key="index">{{ index }} : {{ name }}</p> <p>{{ user.name }} {{ user.age }}</p> </template> <script> export default{ data(){ return{ } }, //接收数据 props:{ title:{ type:[String,Number,Array,Object] }, names:{ type:Array }, user:{ type:Object, //必选项 required:true }, test:{ type:String }, number:{ type:Number, default:0 } } } </script>
Props实现子传父
组件数据传递$emit
组件模板表达式中，可以使用$emit方法触发自定义事件
组件间传递数据应用场景:子传父
Child.vue
<template> Child <button @click="clickEventHandle">向父组件发送数据</button> </template> <script> export default{ data(){ return{ msg:"传递数据" } }, methods:{ clickEventHandle(){ this.$emit("eventDemo",this.msg) } } } </script>
Parent2.vue
<template> <Child @eventDemo="getHandle"/> </template> <script> import Child from "./Child.vue" export default { components:{ Child }, methods:{ getHandle(data){ console.log(data) } } } </script>
组件+v-model
查询：<inputtype="text"v-model="search">
watch:{ search(newValue,oldValue){ this.$emit("searchEvent",newValue) } },
透传
透传attribute指的是传递给一个组件，没有被该组件声明为props或emits的arrtibute或者v-on事件监听器。最常见的例子就是class、id、style。
一个组件以单个元素为根做渲染时，透传的attribute会自动被添加到根元素上
App.vue
Attr.vue
<template> <h2>透传属性测试</h2> </template> <style> .colorDemo{ color: aqua; } </style>
效果
禁用透传attribute
export default{ inheritAttrs:false }
动态组件
<template> <component :is="tabComponent"></component> <button @click="changeComponent">切换组件</button> </template> <script > import ComponentsA from "./components/ComponentsA.vue" import ComponentsB from "./components/ComponentsB.vue" export default{ data(){ return{ tabComponent:"ComponentsA" } }, methods:{ changeComponent(){ // 三元运算符 this.tabComponent= this.tabComponent =="ComponentsA"? "ComponentsB" : "ComponentsA" } }
当使用在多个组件间切换时，被切换掉的组件会被卸载。可以通过组件前置被切换掉的组件依然保持“存活状态”
<KeepAlive> <component :is="tabComponent"></component> </KeepAlive>
异步组件
Vue提供了defineAsyncComponent实现异步组件功能。
import ComponentsA from "./components/ComponentsA.vue" //异步加载组件 const ComponentsB =defineAsyncComponent(()=> import("./components/ComponentsB.vue") ).catch(function(error){ console.log(error); })
异步组件的优势
1.减少应用程序的初始加载时间
异步组件只有在需要使用该组件时才会进行加载，可以减少应用程序的初始加载时间，提高用户体验。
2.提高应用程序的性能
异步组件可以将组件的加载和渲染分开进行，可以提高应用程序的性能，避免不必要的渲染。
3.优化代码的可维护性
异步组件可以将组件按需加载，可以优化代码的可维护性，减少代码的复杂度。
异步组件的注意事项
1.异步组件的加载时间
异步组件是按需加载的，因此在使用异步组件时，需要考虑组件的加载时间。如果组件的加载时间过长，会对应用程序的性能和用户体验产生影响。
2.异步组件的错误处理
在使用异步组件时，需要对组件加载过程进行错误处理，避免出现错误导致应用程序无法运行。可以通过 catch() 方法来捕获异步加载组件时的错误。
Slots插槽
插槽 slot 通常用于两个父子组件之间，最常见的应用就是使用一些 UI 组件库中的弹窗组件时，弹窗组件的内容是可以自定义，这就是使用了插槽的原理。
SlotsDemo.vue
<template> <slots></slots> </template> <script> export default{ } </script>
元素是一个插槽出口(slot outlet)，表示父类提供的插槽内容渲染的位置
插槽的作用域
插槽内容可以访问父组件的数据作用域，插槽的内容本身就是在父组件模板中定义
默认值
在父组件没有传递数值的情况下显示
<template> <slots>默认值</slots> </template>
具名插槽
给插槽提供名字
App.vue
<SlotsDemo> <template v-slot:h1> <h2>标题</h2> </template> <template v-slot:h2> <p>{{msg}}</p> </template> </SlotsDemo>
SlotsDemo.vue
<template> <slot name="h1">默认值</slot> <slot name="h2">默认值</slot> </template>
v-slot简写#
<template #h1> <h2>标题</h2> </template> <template #h2> <p>{{msg}}</p> </template>
插槽数据传递
插槽的内容可能同时获取给父组件作用域和子组件作用域的数据，可以类似props，在插槽的出库是传递arrtibutes
将子组件的数据传递给父组件
子组件
<template> <slot :childmsg="childmsg"></slot> </template> <script> export default{ data(){ return{ childmsg:"child" } } } </script>
父组件
<SlotsDemo v-slot="slotProps"> {{ slotProps.childmsg }}+{{ msg }} </SlotsDemo>
具名+插槽数据传递
子组件
<template> <slot name="h1">默认值</slot> <slot name="h2" :childmsg="childmsg"></slot> </template>
父组件
<SlotsDemo > <template #h1> <h2>标题</h2> </template> <template #h2="slotProps"> <p> {{ slotProps.childmsg }}+ {{msg}}</p> </template> </SlotsDemo>
