[JavaScript知识库]Vue3.0入门之组件的使用

组件的封装

vue基本框架包括template、script、以及style标签，template里写html代码，script里写js代码，style里写css代码。
封装组件即写一个完整的组件且可供父组件使用，只需在script中键入下列代码：

<template>
  <div>
      这里是html内容
  </div>
</template>

<script>
// 这里键入js代码
export default {
// export default 中可简单理解为可供外界引用
// name 就是这个组件的名字，当外界调用该组件时，需要说明组件名字，名字需要用引号包含
name:'',
}
</script>

<style>
/* 这里是css代码，代码语法服从css语法 */
</style>

组件的注册

组件注册是在父组件中使用，即常用的APP.vue中，代码入下：

<template>
  div
</template>

<script>
//1、import需写在script标签中
//2、name 即封装组件时给组件起的名字，from后加组件所在的路径
//3、在export default中注册组件 一般组件名字和注册组件的名字都相同，所以只需如下代码
//4、至此，组件已经注册成功
import name from '/xxx/xxx/xxx.vue';
export default {
    components:{
        name,
    }
}
</script>

<style>

</style>

组件的使用

组件的使用是建立在组件封装和注册都完成的基础上，值得注意的是，如果组件封装和注册都完成了而不使用，也会报错。组件的使用与标签类似：

<template>
  <div>
//组件的使用与标签类似
      <name></name>
  </div>
</template>

<script>
//1、import需写在script标签中
//2、name 即封装组件时给组件起的名字，from后加组件所在的路径
//3、在export default中注册组件 一般组件名字和注册组件的名字都相同，所以只需如下代码
//4、至此，组件已经注册成功
import name from '/xxx/xxx/xxx.vue';
export default {
    components:{
        name,
    }
}
</script>

<style>

</style>

//记录第一篇博客，也记录自己的成长。