如何父组件使用子组件数据:
1:子组件通过<slot :user="user"> </slot>
把数据传入插槽中
2:在父组件中<template v-slot:default="sprops"{{sprops.user.age}}</template>
把插槽中数据传入,并命名为sprops,然后就可以使用子组件数据了。
子组件
<template>
<h1>
<!--:user="user" 就把子组件中数据传给了slot-->
<slot :user="user">
</slot>
</h1>
</template>
<script>
export default {
data() {
return {
user: {
name:"wxy",
age:20
}
}
}
}
</script>
<style></style>
父组件
<template>
<div>
<!--父组件中不传值,显示子组件内容,否则显示父组件中内容-->
<!--父组件中使用子组件数据(作用域插槽)-->
<!--子组件通过:user="user" 把数据传给了插槽,父组件v_slot=""对传来的数据命名,就可以使用子组件内容了-->
<current-user>
<template v-slot:default="sprops">
{{sprops.user.age}}
</template>
</current-user>
</div>
</template>
<script>
import CurrentUser from './CurrentUser';
export default {
component:{
CurrentUser
}
}
</script>
<style></style>