一、定义父路由和子路由
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>