碧海蓝天网站,h5制作模板官网,重庆网站开发设计公司,c2c交易平台官网组件基础
每一个.vue 文件都可以充当组件来使用
每一个组件都可以复用
父组件引入之后可以直接当标签使用
案例#xff1a;
App.vue
script setup langts
import BaseRefAndReactive from ./components/BaseRefAndReactive.vue;/sc…组件基础
每一个.vue 文件都可以充当组件来使用
每一个组件都可以复用
父组件引入之后可以直接当标签使用
案例
App.vue
script setup langts
import BaseRefAndReactive from ./components/BaseRefAndReactive.vue;/scripttemplateBaseRefAndReactive/BaseRefAndReactive/templatestyle scoped/style组件的生命周期
也就是一个组件从创建到更新最后销毁的过程
在我们使用Vue3 组合式API 是没有 beforeCreate 和 created 这两个生命周期的也就是在使用setup语法糖时
常用的生命周期钩子主要有以下六个
onBeforeMount()
在组件DOM实际渲染安装之前调用。在这一步中dom元素还不存在。
onMounted()
在组件的第一次渲染后调用该元素现在可用允许直接DOM访问
onBeforeUpdate()
数据更新时调用发生在虚拟 DOM 打补丁之前。也就是真实dom尚未更新
onUpdated()
DOM更新后updated的方法即会调用。
onBeforeUnmount()
在卸载组件实例之前调用。在这个阶段实例仍然是完全正常的。
onUnmounted()
卸载组件实例后调用。调用此钩子时组件实例的所有指令都被解除绑定所有事件侦听器都被移除所有子组件实例被卸载。
案例
App.vue
script setup langts
import BaseRefAndReactive from ./components/BaseRefAndReactive.vue;
import {ref} from vue;
let flag ref(true);/scripttemplateBaseRefAndReactive v-ifflag/BaseRefAndReactivebutton clickflag !flag点我测试/button
/templatestyle scoped/style组件内
script setup langts
import { ref, Ref,onBeforeMount,onMounted,onBeforeUpdate,onUpdated,onBeforeUnmount,onUnmounted } from vue
const refData ref(我是组件哈哈哈)
const divText ref(我是div)
let div:RefHTMLDivElement | null ref(null)
onBeforeMount((){console.log(onBeforeMount,div.value)
})
onMounted((){console.log(onMounted,div.value)
})
onBeforeUpdate((){console.log(onBeforeUpdate,div.value?.innerHTML)
})
onUpdated((){console.log(onUpdated,div.value?.innerHTML)
})
onBeforeUnmount((){console.log(onBeforeUnmount,div.value)
})
onUnmounted((){console.log(onUnmounted,div.value)
})
function change() {divText.value 我是div改变后的
}
/scripttemplatediv{{refData}}/divdiv refdiv{{divText}}/divbutton clickchange改变/button
/templatestyle scoped/style 执行图片 父子组件传参
父--- 子
父组件通过v-bind绑定一个数据然后子组件通过defineProps接受传过来的值
如果说只传一个字符串的话不需要使用v-bind
案例
子组件
通过defineProps方法参数传一个对象将要接受的数据通过属性的方式写入如果要进行一些配置也可以使用对象的形式进行配置如title
script setup langts
defineProps({title: {type: String,default: Hello World},list: Array
})
/scripttemplatedivh1{{ title }}/h1ulli v-for(item,index) in list :keyindex{{ item }}/li/ul/div
/templatestyle scoped/style
如果要在setup内使用就需要接受defineProps的返回值返回值为对象类型属性就是传过来的数据
const data defineProps({ title: { type: String, default: Hello World }, list: Array })
data.title
使用ts的方式一泛型的方式去接受数据
defineProps{title: string,list: number[]
}()
如果像指定默认值需要使用withDefaults方法在第二个参数处以对象属性的形式指定为了防止引用冲突数组对象等采用工厂形式返回
withDefaults(defineProps{title: string,list: number[]
}(), {title: default title,list: () [1,2,3]
})
父组件内
script setup langts
import BaseRefAndReactive from ./components/BaseRefAndReactive.vue;
import {ref} from vue;
const list ref([1,2,3,4,5])/scripttemplateBaseRefAndReactive title这是标题 :listlist/BaseRefAndReactive
/templatestyle scoped/style子---- 父
子组件给父组件传参
是通过defineEmits派发一个事件绑定一个自定义事件通过一些vue有的事件去触发这个emit从而达到传值的目的
子组件内
script setup langts
withDefaults(defineProps{title: string,list: number[]
}(), {title: default title,list: () [1,2,3]
})
let emit defineEmits([on-click])
const handleClick () {emit(on-click, 我是子组件1,123,as,{name:张三})
}
/scripttemplatedivh1{{ title }}/h1ulli v-for(item,index) in list :keyindex{{ item }}/li/ulbutton clickhandleClick传值/button/div
/templatestyle scoped/style
使用ts的方式限制参数更加严格
let emit defineEmits{(e: on-click, name: string,age: number): void
}()
const handleClick () {emit(on-click, zhangsan, 18)
}
父组件
script setup langts
import BaseRefAndReactive from ./components/BaseRefAndReactive.vue;
import {ref} from vue;
const list ref([1,2,3,4,5])
const handleClick (name:string,...args) {console.log(name,父------)console.log(args)
}
/scripttemplateBaseRefAndReactive title这是标题 :listlist on-clickhandleClick/BaseRefAndReactive
/templatestyle scoped/style子组件暴露给父组件内部属性
通过defineExpose
子组件
script setup langts
import { ref,reactive } from vue
const list reactive([1,2,3,4,5])
const str ref(hello)
defineExpose({list,str
})
/scripttemplatedivpref:{{str}}/p/div
/templatestyle scoped/style
父组件
script setup langts
import BaseRefAndReactive from ./components/BaseRefAndReactive.vue;
import {ref,onMounted} from vue;
let refBase ref(null);
onMounted((){console.log(refBase.value);
})
/scripttemplateBaseRefAndReactive refrefBase/BaseRefAndReactive
/templatestyle scoped/style注意需要在onMounted里打印的原因是setup的生命周期早于子组件挂载也就是子组件还没有挂载就打印输出所以会是undefined
