vue3学习笔记（二）

Teleport

---

提供一种方法，允许选择在DOM下哪个父节点下渲染HTML，不必求助于全局状态或拆分为两个组件

//例子
app.component('modal-button', {
    template:`
        <teleport to= "body">
            <div>I'm a teleported modal!</div>
        </teleport>
    `,
    data() {}
})

如果 <teleport> 包含vue组件，则其仍然是teleport 父组件的逻辑子组件

如果在同一目标上使用多个<teleport>组件，顺序是稍后挂载的位于较早挂载的之后

props：

to - string 必须是有效的查询选择器或者是HTML Element，指定将在其中移动<teleport>内容的目标元素

<teleport to= "#some-id" />
<teleport to= ".some-class" />
<teleport to= "[data-teleport]" />

disabled - boolean 用于禁用<teleport>功能

片段

---

支持多根节点组件，但要求显式定义attribute 分布在哪

<!-- vue2.x -->
<template>
    <div>
        ...
    </div>
</template>
​
<!-- vue3.x -->
<template>
    <header>...</header>
    <main v-bind="$attrs">...</main>
    <footer>...</footer>
</template>

状态驱动的动态CSS

<style> 标签可以通过 v-bind 将Css值关联到动态组件状态上。<script setup>同样适用

<script>
    export default {
        data() {
            return {
                color: 'red'
            }
        }
    }
</script>
<!-- 同样适用 setup -->
<sctipt setup>
    const theme = {
        color: 'red'
    }
</sctipt>
<style>
    .text {
        color: v-bind(color);
        // setup写法 需要加上引号
        color: v-bind('theme.color');
    }
</style>

非兼容性变更

v-for 与 v-if

3.x版本 v-if总是优先于v-if

---

待更新