Vue3父组件与子组件的参数传递

一、定义父路由和子路由

1.子组件：

<template>
 这里是子路由
 <div></div>
    <input type="text">

</template>

2.父组件：在vue3中调用子组件只需要利用import导入就可以直接使用，与vue2不同，vue2中需要在父组件对应路由下添加子路由；

<template>
    <div>
  <Child></Child>
    </div>
</template>
<script setup>
import Child from './Child.vue';
</script>

二、传参

1.vue2的方法

vue2的方法仍然还支持，首先在父组件中调用子路由的时候传入参数

<template>
    <div>
  <Child type="password" placeholder="请输入。。。"></Child>
    </div>
</template>
<script setup>
import Child from './Child.vue';
</script>

然后在组见中定义props接收传入参数，需要在接收参数的地方进行v-bind双向绑定

<template>
 这里是子路由
 <div></div>
    <input :type="type" :placeholder="placeholder">

</template>
<script>
export default{
 props:['type','placeholder'],
}

</script>

2.vue3的新增方法

父组件和上边的vue2的传入参数一致

子组件通过defineProps方法进行接收，绑定的方式有两种（1.直接用接受的属性绑定，2.用定义的props下的对应属性进行绑定）（用1.绑定的type,用2.绑定的placeholder）

<template>
 这里是子路由
 <div></div>
    <input :type="type" :placeholder="props.placeholder">

</template>
<script setup>
import { defineProps } from 'vue';
const props=defineProps(['type','placeholder']);

</script>