0
点赞
收藏
分享

微信扫一扫

【Vue】Vue-cli中组件之间的嵌套

天涯学馆 2022-05-24 阅读 68


一、组件之间的嵌套(普通)

1、效果图

【Vue】Vue-cli中组件之间的嵌套_vue

2、MyFather.vue

<template>
<div>
<MySon></MySon>
</div>
</template>

<script>

import MySon from "@/components/FatherSon/MySon.vue"

export default {
name: "MyFather",
components: {
MySon,
},
};
</script>

<style scoped>
div {
margin-top: 10px;
width: 410px;
height: 200px;
background-color: rgb(221, 248, 239);
border: 1px rgb(208, 208, 208) solid;
}
</style>

3、MySon.vue

<template>
<div>我是被嵌套的【子组件】</div>
</template>

<script>

export default {
name: "MySon",
};
</script>

<style scoped>

div{
background-color: beige;
height: 30px;
width: 230px;
}

</style>

4、App.vue

<template>
<div>

<MyFather>
</MyFather>

</div>
</template>

<script>
// 引入组件
import MyFather from "@/components/FatherSon/MyFather.vue"

// 注册组件
export default {
name: "App",
components: {
MyFather,

},
};
</script>


举报

相关推荐

0 条评论