vue3知识点

样式穿透

使用样式穿透，可以穿透子组件影响到下面的类的样式，做到对第三方组件的样式自定义。

采用>>>

1
2
3
4
5
uni-data-picker>>>.input-value-border {
    border: 1px solid black;
    width: 100px;
    height: 50px;
}

采用 /deep/

1
2
3
4
5
uni-data-picker /deep/ .input-value-border {
    border: 1px solid red;
    width: 100px;
    height: 50px;
}

采用 ::v-deep

1
2
3
4
5
uni-data-picker::v-deep .input-value-border {
    border: 3px solid orange;
    width: 100px;
    height: 50px;
}

父组件获取子组件属性

根据官方文档，采用组合式 api 编写的组件，内部定义的属性、方法，都是不对外开放的。可以调用 defineExpose() 方法，暴露需要的属性和方法。外部通过 ref 进行模板引用，即可访问暴露出来的属性和方法。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
<template>
    <uni-popup ref="popPage" type="bottom" background-color="#f7f7f7">
        <div class="boxBack">
            <div class="box">
                <input type="nickname" placeholder="请输入分类名称" v-model="catName">
                <button ref="nickBtn" @click="">确认</button>
            </div>
        </div>
    </uni-popup>
</template>

<script setup lang="ts">
import { ref } from 'vue';

const popPage = ref(null);
const catName = ref("");

function popUp() {
    console.log(popPage.value);
    (popPage.value as any).open();
}

defineExpose({
    popUp
})


</script>

<!-- 弹出层样式 -->
<style scoped>
</style>

props设置默认值

1
2
3
4
5
6
7
8
//Boolean 类型的未传递 prop 将被转换为 false。————官方文档
let props = defineProps({
    title: String,
    showBack: {
        type: Boolean,
        default: true
    }
});

watch props的值

要使用 getter 函数。此处的 props.catName 是一个外部传入常量，如果给 watch 这个东西，那么 watch 调用，生成监视的时候，收到的参数是一个常量，这不对。要给 watch 一个getter 函数，让它自己调用函数去看，这样监视器看到返回值跟之前不一样了，才知道发生了变化。

1
2
3
4
watch(() => props.catName, async (oldCatName, newCatName) => {
    if ((productsMap.value as any)[props.catName].length == 0)
        getProsByCatName();
})

侦听器 | Vue.js (vuejs.org)