vue3组件通信（1）——props

1.父组件——>子组件

1.1父组件向子组件传递参数

props实现组件间通信的方式，存在于父子组件关系中，即在父组件中需要引入子组件<child/>，通过子组件标签，进行参数传递，<child :qiche="car" :gettoy="getToy"/>  可以传递数据，也可以传递方法名；

<template>
  <div class="father">
    <h1>我是父组件,我有一辆车：{{ car }}</h1><br>
    <h2 v-show="toy">子组件给我传递了一个玩具：{{ toy }}</h2>
  </div>
  <br>
  <!-- 父组件给子组件传递参数 -->
  <child :qiche="car" :gettoy="getToy"/>

</template>

<script setup lang="ts">

import Child from "./child.vue";
import {ref} from "vue";

let car = ref('$雅迪$')
// 父组件接收子组件传过来的参数 利用函数的参数传递实现
let toy = ref('')

function getToy(value:string) {
  toy.value = value
  console.log('父组件的gettoy函数需要子组件传递过来一个参数', value)
}

</script>

1.2子组件接收父组件传递参数

子组件通过defineProps([ ]) ，接收父组件传递过来的多个参数，在template中可直接使用，在script中需要接收以后再使用；

// 子组件通过defineProps接收父组件传过来的参数
defineProps(['qiche','gettoy'])

// 在模板里面直接使用
<h2>父组件给了我一辆{{qiche}}车</h2>
<button  @click="gettoy(toy)">点击给父组件传递玩具</button>

//在脚本里需要先保存再使用
const props=defineProps(['qiche','gettoy'])
console.log(props.qiche,props.gettoy)

2.子组件——>父组件

2.1子组件向父组件传递参数

子组件通过接收父组件的函数，通过函数传参的方式，向父组件传递参数；@click="gettoy(toy)"

<template>
  <div class="child">
    <h1>我是子组件,我有一个玩具：{{ toy }}</h1><br>
    <h2>父组件给了我一辆{{qiche}}车</h2>
    <button  @click="gettoy(toy)">点击给父组件传递玩具</button>
  </div>
</template>

<script setup lang="ts">

import {ref} from "vue";

let toy=ref('电脑')
// 子组件通过defineProps接收父组件传过来的参数
const props=defineProps(['qiche','gettoy'])
console.log(props.qiche,props.gettoy)

</script>

2.2父组件接收子组件传递参数

父组件可定义一个响应式数据，保存子组件传递过来的数据；

// 父组件接收子组件传过来的参数 利用函数的参数传递实现
let toy = ref('')

function getToy(value:string) {
  toy.value = value
  console.log('父组件的gettoy函数需要子组件传递过来一个参数', value)
}

3.补充：

vue3项目配置路由步骤：

a 导入路由器包  npm i vue-router

b 新建存放位置  src->router->index.ts

c 在index.ts内配置路由：

        1.引入路由及其路由组件 （路由组件一般存放在 src->pages  或者  src->views）

//引入路由 及其 路由组件
import {createRouter,createWebHistory} from 'vue-router';
import father from '../pages/props/father.vue'
import child from '../pages/props/child.vue'

        2.创建路由器 并 配置路由信息

//创建路由器
const router=createRouter({
    // 设置路由器工作模式
    history:createWebHistory(),
    //配置路由信息
    routes:[
        // 第一对路由关系
        {
            path:'/baba',
            name:'fuqing',
            component:father
        },
        // 第二对路由关系
        {
            path:'/erzi',
            name:'haizi',
            component:child
        },
        //设置路由重定向
        {
            path:'/',
            redirect:'/baba'
        }
    ]
})

        3.暴露路由

//暴露路由
export default router

        4.main.ts使用路由

// 使用路由
app.use(router)