Vue如何封装组件

Question

想封装一个Vue组件来使用，大佬们有没得清楚易懂的例子。。。。

Answer 1

最近刚好接手一个vue前端项目，基本上是在边查文档边写代码，可以参考下面代码，希望可以帮到你

<template>
  <div class="">
      <demo />
  </div>
</template>
<script>
// 导入组件: 组将路径可根据实际情况随意定义，一般情况下都放在 components下
import demo from './demo.vue'
export default {
  data() {
      return {}
  },
  components: {
      // 加载组件
      demo
  },
}
</script>
<style scoped lang="scss"></style>

// 组件页面
<template>
  <div class="">
      this is components
  </div>
</template>

<script>
export default {
  data() {
      return {}
  },
  components: {},
}
</script>
<style scoped lang="scss"></style>

Answer 2

1.新建xxx.vue
<template><div>...写页面....</div></template>
<script>
export default {
name:'School',
data(){},
methods:{},
}
</script>
<style></style>
2.使用
<template><div><School></School></div></template>
<script>
import School from './School'
export default{
name:'App',
components:{
School}
}
</script>