vue2-使用组件的三个步骤

原创已于 2024-07-07 14:48:44 修改 · 1k 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#前端 #java #javascript

于 2024-07-07 14:47:47 首次发布

1、组件在被封装好后，彼此之间相互独立，不存在父子关系。在使用组件的时候，根据彼此的嵌套关系，形成了父子关系、兄弟关系。

2、使用组件的三个步骤

（1）使用import语法导入需要的组件

import Left from '@/components/Left.vue'

(2)使用components节点注册组件

export default{
    components:{
        Left
    }
}

(3)以标签形式使用刚才注册的组件

<div class="box">
    <Left></Left>
</div>

3、案例

<template>
  <div class="app-container">
    <h1>App根组件</h1>
    <hr />

    <div class="box">
      <!-- 渲染Left组件和Right组件 -->
      <!-- 使用 Left 组件 -->
      <Left></Left>
      <Right></Right>
    </div>
  </div>
</template>

<script>
// 导入需要使用的 Vue 组件
import Left from '@/components/Left.vue';
import Right from '@/components/Right.vue'
export default {
  // 注册组件
  components: {
    Right,
    Left
  }
}
</script>

<style lang="less">
.app-container {
  padding: 10px 20px; /* 调整 padding 样式 */
  background-color: #efefef;
}

.box {
  margin-top: 20px; /* 添加一个顶部间距 */
}
</style>