vue-基础知识

模板ref

1. 如果使用了<script setup>的组件默认是私有的，
2. 一个父组件是无法访问到一个使用了<script setup>的子组件的任何东西，除非使用defineExpose宏显示暴露

组件基础

• defineProps返回的对象自动暴露给模板
• 动态组件

<component :is=tabs[currentTab]></component>

透传Attribute

• 禁止透传

<script>
export default{
    inheritAttrs:false
}
</script>
<script setup></script>

插槽

• 具名插槽

子组件
<div>
    <header>
        <slot name="header"></slot>
    </header>
    <footer>
        <slot ></slot>
    </footer>
</div>
父组件
<chiildren>
    <template #header></template>
    <template #default></template>
</children>

• 作用域插槽 子组件通过插槽传递数据

子组件
<div>
    <slot :text="msg" :count="1">
        
    </slot>
</div>

父组件
<children v-slot="slotProps">
    {{slotProps}
</children>

依赖注入 provide inject

祖先组件
procide(/*注入名*/'msg',/*值*/'dddd')


子组件
inject(/*注入名*/msg,/*默认值*/)