vue 3.0 slot和slot-scope
子组件<template><div>子类<slot :studentSon="student" name="stu"> </slot>--- 后面是子的</div></template><script lang="ts">import { Options, Vue } from "vue-class-compone
·
子组件
<template>
<div>
子类
<slot :studentSon="student" name="stu"> </slot>
--- 后面是子的
</div>
</template>
<script lang="ts">
import { Options, Vue } from "vue-class-component";
@Options({
props: {
student: Object,
},
})
export default class PageVueSlotScopeCopm extends Vue {
student!: any;
}
</script>
父组件
<template>
<div class="p-clip-path">
<h3 @click="handleOpen">slot-scope</h3>
<span>用于子组件将数据传递过来,父类使用。</span>
<div class="p-display">
<m-c :student="studentInfo">
<template v-slot:stu="prop"> 父页面内容 --{{ prop.studentSon.name }} </template>
</m-c>
</div>
</div>
</template>
<script lang="ts">
import MC from "./compontent.vue";
import { Options, Vue } from "vue-class-component";
@Options({
components: {
MC,
},
})
export default class PageVueSlotScope extends Vue {
studentInfo = {
name: "张三",
age: 18,
};
}
这里是将数据studentInfo
传到子组件,然后子组件通过slot 里面 name的属性凹槽,父类就通过v-slot:name
把子组件改变,v-slot:stu="prop"
是将子组件里面的:studentSon="student"
的数据交给父组件调用,所以可以显示出来
更多推荐
已为社区贡献7条内容
所有评论(0)