Pinia

安装pinai

pnpm install pinia

组件通信

初始化一个基于vite的vue项目

命令npm create vite@latest
vscode安装插件
- Vue-Official[原Volar] 语法提示
- Vue VSCode Snippets : 别名路径跳转

父传子

app.vue 父组件

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

//导入子组件
//App.vue是父组件,因为它包含了header.vue和footer.vue两个子组件
import Header from "./components/header.vue"
import Footer from "./components/footer.vue"

/*
const propsWeb = {
  user: 10,
  ip: '127.0.0.1'
}
*/
//响应式数据
const propsWeb = reactive({
  user: 10,
  ip: '127.0.0.1'
})

//添加用户
const userAdd = () => {
  propsWeb.user++
  console.log(propsWeb.user)
}
</script>

<template>
  <!-- 父传子 - 方式1 -->
  <Header propsName="邓瑞编程" propsUrl="dengruicode.com" />

  dengruicode.com

  <button @click="userAdd">添加用户</button>

  <!-- 父传子 - 方式2 -->
  <!-- <Footer v-bind="propsWeb" /> -->
  <Footer :="propsWeb" />
</template>

子组件接受

Header.vue

<script setup lang="ts">
    //子组件

    //接收方式1 - 数组
    /*
        defineProps是Vue3的编译时宏函数,
        用于接收父组件向子组件传递的属性(props)

        注
        当使用Vue编译器编译包含defineProps的组件时,
        编译器会将这些宏替换为相应的运行时代码
    */
    const props = defineProps(["propsName","propsUrl"])
    console.log(props)
</script>

<template>
    <h3>header</h3>
</template>

<style scoped>

</style>

vue全家桶

Pinia

组件通信