手拉手Vue组件由浅入深（上）：https://developer.aliyun.com/article/1431697
传递数组，对象
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
查询：<input type="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" } }
当使用<component :is="tabComponent"></component>在多个组件间切换时，被切换掉的组件会被卸载。可以通过<keep-alive>组件前置被切换掉的组件依然保持“存活状态”
<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() 方法来捕获异步加载组件时的错误。
依赖注入-透传
prop逐级透传可以用provide和inject解决这一问题。一个父组件相对于其所有的子组件，会作为依赖提供者。任何子组件树，无论层级多深，都可以注入由父组件提供给整条链路的依赖
App.vue
<template> <Parent/> </template> <script > import Parent from "./components/Parent.vue" export default{ provide:{ messages:"app组件" }, } </script>
Parent.vue
<template> <h3>Parent</h3> <Child></Child> </template>
Child.vue
<template> Child <p>{{ messages }}</p> </template> <script> export default{ inject:["messages"], } </script>
效果
动态穿透
<template> <Parent/> </template> <script > import Parent from "./components/Parent.vue" provide(){ return{ messages: this.messages } }, data(){ return{ messages:"app组件" } }, </script>
全局数据
app.provide("golabData","全局数据")
