526互联

[vue]精宏技术部试用期学习笔记 III

发布时间 2023-11-02 20:00:31作者: Rosyr

精宏技术部试用期学习笔记（vue）

父子通信

什么是通信 / 为什么要通信

通信即在不同组件之间传输数据

  • 当在 复用组件 时，需要传递不同数据达成不同的表现效果

  • 能够根据其他组件的行动，响应式 的做出变化

Props

功能: 让父组件信息传递到子组件

code:

假定 index.vue 已经通过 router 挂载在了 '/' 路由下

//index.vue
<script setup>
import { ref } from 'vue';
import vue1 from '../components/vue1.vue';

const num1 = ref(15);
const increase = () => {
    num1.value += 1;
}

</script>

<template>
    <h1>Index Page</h1>
    <span>num1 = {{ num1 }}</span>
    <button @click="increase">increase</button>
    <vue1 :numFa="num1"></vue1>
</template>

//vue1.vue
<script setup>
    defineProps({
        numFa: Number
    })
</script>

<template>
    <h2>这是vue1组件</h2>
    <span>numFa: {{ numFa }}</span>
</template>
关于解构

定义之后直接使用就是响应式的

但如果解构之后不用 toRefs 则变成无法响应

    <script setup>
        import { toRefs } from 'vue';
        const props = defineProps({
            numFa: Number
        })

        // const { numFa = "none" } = props;
        //解构1 无法响应

        //const { numFa = "defualt" } = toRefs(props);
        //解构2 但是可以响应
    </script>

注意点：

  • 父组件在定义传递参数时需要使用响应式(ref)
  • 传递参数时，元素内要用 "v-bind:" 来连接响应式变量

ex 其他写法：

//非 <script setup> 写法
export default {
    props: {
        numFa: Number
    }
}

//ts写法
<script setup lang="ts">
defineProps<{
  title?: string
  likes?: number
}>()
</script>

Emit

原理

子元素触发 事件1 -> emit(传值) -> 父元素 事件2(监听-事件1) -> 获得子元素传值

code

//index.vue
<script setup>
import { ref } from 'vue';
import vue2 from '../components/vue2.vue';

const sonInfo = ref("");
const sonsetInfo = (value) => {
    sonInfo.value = value;
    alert(sonInfo.value);
}
</script>

<template>
    <h1>Index Page</h1>
    <vue2 @getText="sonsetInfo"></vue2>
</template>

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

    const emit = defineEmits(["getText"]);
    const text = ref("defualt");

    const getText = () => {
        emit("getText", text.value);
    };
</script>

<template>
    <h2>这是vue2组件</h2>
    <div>text: {{ text }}</div>
    <input type="text" v-model="text"><br>
    <button @click="getText">updata text</button>
</template>

pinia 组件通信

为什么使用 pinia

props 和 emit 是依托于父子组件的关系来传递变量

但在两个不相关的组件之间传递变量就会很麻烦

因此需要 pinia 来大统一变量

如何使用 pinia

1 安装 pinia

pnpm i pinia

安装好后能在 package.json 中查看

2 挂载 pinia

流程类似于 vue-router

这里对 pinia 进行了一个封装

让 mian.ts 高度精炼

同时创建了 stores文件夹

用来存放 pinia 相关文件

//./stores/index.ts
import { createPinia } from "pinia";
const pinia = createPinia();

export default pinia;

//main.ts
import pinia from './stores/index.ts';
app.use(pinia);

3 创建 pinia库

在 stores 中创建文件 transStore.ts

import { defineStore } from "pinia";
import { ref } from "vue";

const transStore = defineStore("trans", () => {
    const name = ref("Rosyr");
    //在库中定义响应式变量

    const setName = (nvalue: string) => {
        name.value = nvalue;
    };
    //使用setName函数 暴露name变量 （即让外界能访问到

    return {
        name,
        setName,
    }; 
    //用 return 进行开放store内部
});

export default transStore;

4 在 vue组件 中使用 pinia

import transStore from '../stores/transStore';

先导入库

const newTransStore = transStore();

创建变量存放库

  • 非响应式读取pinia库中的值
const namevalue = newTransStore.name;
  • 响应式读取pinia库中的值
import { storeToRefs } from 'pinia';

const {name} = storeToRefs(newTransStore);

pinia + vue-router

在 app 挂载的时候 router总会比pinia先挂载

因此要在router中使用pinia来实现路由守卫

需要在router中手动引入pinia

import { createPinia } from "pinia";
import transStore from '../stores/transStore';

const pinia = createPinia();
const newTransStore = transStore(pinia);

//...