VueJS 基础之组件

参考

项目	描述
VueJS	官方文档
搜索引擎	Bing
哔哩哔哩	黑马程序员

描述

项目	描述
Edge	109.0.1518.70 (正式版本) (64 位)
操作系统	Windows 10 专业版
@vue/cli	5.0.8
npm	8.19.3
VueJS	2.6.14

注：

推荐使用 Vue CLI 初始化 Vue 项目，如果你不清楚如何使用 Vue CLI ，欢迎移步至我的另一篇博客 Vue CLI（Vue.js 开发的标准工具） 。

组件化开发

组件化的目的，是为了让页面中的各个部分可以被复用，以减少重复的代码。另一方面，也可以更好地使团队分工协作，让不同的人负责编写不同的组件。
前端页面可以借助某种框架（如Vue.js、Angular、React）来实现组件化开发，使代码更容易复用。此时，一个网页不再是由一个个独立的HTML、CSS和JavaScript文件组成的了，而是按照组件的思想将网页划分成一个个组件，如轮播图组件、列表组件、导航栏组件等。将这些组件拼装在一起，就形成一个完整的网页了。

---

上述内容引用自 网络

使用 Vue.js 框架编写的单文件组件，以 vue 作为文件扩展名。

组成

每一个 Vue 组件都由三部分组成，即模板、样式及行为。打开 Vue 中的一个组件，你很有可能看到如下结构：

<template>
模板
</template>

<script>
行为
</script>

<style>
样式
</style>

注：

每一个组件中都必须要包含 template 标签，即需要有模板代码，这是一个组件的基础部分。

template

请将根组件 App.vue 文件中的默认内容清空并填充如下内容：

<template>
<div id="app">
  <p class="text">RedHeart</p>
</div>  
</template>

执行效果：

注：

1. template 元素是 VueJS 提供的容器标签。
2. template 元素内仅能存在一个根节点。

script

<template>
<div id="app">
  <!-- 使用内容渲染指令指定显示内容 -->
  <p class="text" v-text="username"></p>
  <!-- 为按钮添加点击事件 -->
  <button class="replace" @click="replace()">修改用户名</button>
</div>  
</template>

<script>
// 在 Vue 组件中，你需要使用 export Default{}
// 来封装 JavaScript 业务逻辑。
export default {
  // 在 Vue 组件中，你需要使用 data() 函数
  // 来返回数据对象。
  data(){
    return {
      // 定义数据
      username: 'RedHeart'
    }
  },
  // 定义事件调用函数
  methods: {
    replace(){
      this.username = 'TwoMoons'
    }
  }
}
</script>

效果：

注：

如果你像这样定义一个数据：

data: {
	username: 'RedHeart'
}

那么这个数据将影响到当前组件的其他实例。具体可以前往 VueJS 官方文档 中查看。

style

<template>
<div id="app">
  <!-- 使用内容渲染指令指定显示内容 -->
  <p class="text" v-text="username"></p>
  <!-- 为按钮添加点击事件 -->
  <button class="replace" @click="replace()">修改用户名</button>
</div>  
</template>

<script>
// 在 Vue 组件中，你需要使用 export Default{}
// 来封装 JavaScript 业务逻辑。
export default {
  // 在 Vue 组件中，你需要使用 data() 函数
  // 来返回数据对象。
  data(){
    return {
      // 定义数据
      username: 'RedHeart'
    }
  },
  // 定义事件调用函数
  methods: {
    replace(){
      this.username = 'TwoMoons'
    }
  }
}
</script>

<style>
.replace{
  color: dodgerblue;
}
</style>

效果：

注：

如果你在 style 元素中添加 lang=“less” 属性，那么你可以使用 Less 语法编写组件的样式。

main.js

位于 Vue 项目文件中的 src 文件见下的 main.js 用于将组件渲染到位于 public 文件夹中的 index.html 中。

在默认情况下（刚使用 Vue CLI 创建 Vue 项目后），main.js 长这样：

import Vue from 'vue'
import App from './App.vue'

Vue.config.productionTip = false

new Vue({
  render: h => h(App),
}).$mount('#app')

其中：

1. import 语句用于导入 VueJS 及需要使用到的相关组件。
2. render 属性用于指定需要渲染的组件。
3. 使用 $mount() 来指定渲染区域。

使用

嵌套关系

多个组件在封装后但没有使用前这段时间中，组件之间并没有任何关系。组件之间产生关系发生在组件的使用过程中。根据组件之间不同的嵌套关系，我们可以得到两种组件间的关系，即父子关系与兄弟关系（这两种关系是组件间最为常见的关系）。

1. 父子关系
   一个组件内部嵌套着另外的组件，那么它们之间存在父子关系。
2. 兄弟关系
   一个组件内部嵌套着另外的组件，这些被嵌套的组件之间存在兄弟关系。

组件的使用

在创建一个 Vue 项目及若干组件后，若你需要使用这些组件，那么你需要进行如下几个步骤：

1. 导入组件。
2. 在 export default{} 中的节点 components 下注册组件。
3. 在导入组件的父级组件中以标签的形式来使用组件。

Left

这是接下来将要使用到的子组件 Left，你可以将该内容保存到 Vue 项目中的 components 文件夹中。

<template>
  <div class="left-container">
    <h3>Left 组件</h3>
    <hr />

    <MyCount :init="9"></MyCount>
  </div>
</template>

<script>
export default {}
</script>

<style lang="less" scoped>
.left-container {
  padding: 0 20px 20px;
  background-color: orange;
  min-height: 250px;
  flex: 1;
}

h3 {
  color: red;
}

// h5[data-v-3c83f0b7]
// [data-v-3c83f0b7] h5

// 当使用第三方组件库的时候，如果有修改第三方组件默认样式的需求，需要用到 /deep/
/deep/ h5 {
  color: pink;
}
</style>

Right

这是接下来将要使用到的子组件 Right，你可以将该内容保存到 Vue 项目中的 components 文件夹中。

<template>
  <div class="right-container">
    <h3>Right 组件</h3>
    <hr />

    <MyCount :init="6"></MyCount>
  </div>
</template>

<script>
export default {}
</script>

<style lang="less">
.right-container {
  padding: 0 20px 20px;
  background-color: lightskyblue;
  min-height: 250px;
  flex: 1;
}
</style>

举个栗子

<template>
  <div class="app-container">
    <h1>App 根组件</h1>
     <hr />
    <div class="box">
      <!-- 以标签形式指定需要使用到的组件 -->
      <Left></Left>
      <Right></Right>
    </div>
  </div>
</template>

<script>
// 导入组件
import Left from '@/components/Left.vue';
import Right from '@/components/Right.vue';

export default {
  // 注册组件
  components: {
    Left,
    Right
  }
}
</script>

// 使用 CSS 预处理器 Less 对组件的样式进行设置
<style lang="less">
.app-container {
  padding: 1px 20px 20px;
  background-color: #efefef;
}
.box {
  display: flex;
}
</style>

执行效果：

注：

1. 在 JavaScript 中，对象的属性名与属性值如果相同，则可以使用属性名来代表属性名及属性值。因此，

components: {
    Left,
    Right
  }

的完整写法为：

components: {
	Left: Left,
	Right: Right
	}

其中，属性名代表注册组件后，使用该组件需要使用的名称。属性代表需要被组成的组件的名称。

2. 如果你使用 Vue CLI 构建 Vue 项目，那么你可以在路径中使用 @ 代表当前项目文件中的 src 文件夹。

全局组件及私有组件

私有组件

使用 export default{} 下的 components 节点注册的组件为私有组件。私有组件仅能在注册该组件的父级组件中使用。

全局组件

被注册的全局组件可以被任意组件所使用。使用 Vue.component() 函数，你可以将某个组件组成为全局组件。

Vue.component('使用该组件时需要使用的名称', 被注册组件的名称);

举个栗子

main.js

import Vue from 'vue'
import App from './App.vue'

Vue.config.productionTip = false

// 导入 Left 组件及 Right 组件
import Left from '@/components/Left.vue';
import Right from '@/components/Right.vue';


// 将这两个组件注册为全局组件
Vue.component('GlobalLeft', Left);
Vue.component('GlobalRight', Right);

new Vue({
  render: h => h(App),
}).$mount('#app')

App.vue

<template>
  <div class="app-container">
    <h1>App 根组件</h1>
     <hr />
    <div class="box">
      <!-- 使用全局组件 -->
      <GlobalLeft></GlobalLeft>
      <GlobalRight></GlobalRight>
    </div>
  </div>
</template>

<script>
export default {
// 并未在此处注册任何组件
}
</script>

// 使用 CSS 预处理器 Less 对组件的样式进行设置
<style lang="less">
.app-container {
  padding: 1px 20px 20px;
  background-color: #efefef;
}
.box {
  display: flex;
}
</style>

效果：

可以看到，我们并没有在 App.vue 中注册组件。但可以直接使用已经被注册的全局组件。