vue中组件的使用

前沿

• 网上有大量的关于组件的使用，包括组件的全局注册，局部注册，我们这里不讲这些，我们从从项目入手，讲如何在项目中使用一个组件；

组件的使用

• 我们可以把组件的建立到使用分为三步；

第一步：创建一个组件

• 我们可以简单的认为所有的组件都是一个单独的.vue的文件，它不需要在路由中定义，我们只需要建好文件，然后写上我们需求的代码；

<template>
  <div>这是一个组件</div>
</template>

<script>
export default {
  data() {
    return {
    }
  },
}

</script>
<style lang='less' scoped>

</style>

第二步：在想要使用的页面中注入这个组件

• 当我们创建一个组件的页面后，我们得能在页面上看到它得样子，才能进行下一步得开发；此时，我们就需要在页面上注册组件；
• 在页面上行注入组件，也可简单得分为三部
  • import引入这个组件
  • 在components中注册这个组件，
  • 在页面上使用

<template>
  <div>这是页面</div>
  <Demo />>
</template>

<script>
// 组建名一般大写开头
import Demo from '组件得路径'

export default {
  data() {
    return {
    }
  },
  components: {
    Demo,
  },
}

</script>
<style lang='less' scoped>

</style>

第三步，当我们在页面上看到组件的生效后，就可以进行后续的开发。