vue组件详细解释

vue组件

含义

根据封装的思想，把页面上可重用的UI结构封装为组件，从而方便项目开发维护。

vue中的组件化开发（形式）

规定：组件的后缀名为.vue，App.vue本质就是一个vue的组件。

3个组成部分

每个.vue组件都由三个组成部分构成

• template：组件的模版结构

• script：组件的JavaScript行为

• style：组件的样式

template模板结构中应该只能包含一个根元素，因此若有多个应包含在一个大div中。

script部分

1. export default：用于导出组件对象或实例，使其可以在其他文件中被引用和使用，并包含以下一切，将这些内容作为一个整体导出，以便在其他地方可以引用和使用该组件。它是将组件的逻辑部分进行封装和导出的关键。

2. data：定义组件的初始数据。可以是一个对象或一个返回对象的函数。这些数据可以在组件的模板中进行绑定和显示。

3. computed：定义计算属性，这些属性的值会根据依赖的数据动态计算而来。计算属性的结果会被缓存，只有依赖的数据发生变化时才会重新计算。

4. methods：定义组件的方法。这些方法可以在组件的模板中绑定到事件或其他触发方式上，并用于处理用户交互、执行业务逻辑等操作。

5. watch：用于观察和响应数据的变化。可以监听指定的数据或计算属性，当其发生变化时执行相应的操作。

6. created、mounted等生命周期钩子函数：这些函数会在组件的生命周期中被自动调用。可以在这些函数中执行一些初始化操作、发送异步请求、订阅事件等。

7. 其他自定义的属性和方法：根据需要，可以在<script>部分定义其他自定义的属性和方法，用于组件的逻辑处理。

这些成分共同构成了Vue组件的逻辑部分，用于定义组件的数据、计算属性、方法以及生命周期等。通过在<script>部分编写这些代码，可以实现组件的行为和功能，并与模板进行交互。

示例/分析

<template>
<div class="test-box">
  <h3>this is test{{ username }}</h3>
  <button @click="changeName">change name</button>
  </div>
</template>
​
<script>
  //export default{}每个script开头都必须要写
  //export default 是 JavaScript 中用于导出默认值的语法。在 Vue 单文件组件中，export default 用于导出组件的定义。
​
  //在 Vue 单文件组件中，export default 通常用于导出一个包含组件选项的对象。这个对象描述了组件的模板、逻辑和样式等内容，以便在其他地方引用和使用该组件。
  export default {
    // 组件的逻辑部分
    //在 Vue 2 的单文件组件中，data 选项必须是一个函数而不是一个对象。这是因为 Vue 2 使用 data 函数的返回值作为组件实例的数据对象，这样可以确保每个组件实例都有独立的数据副本，避免数据共享和潜在的问题。
    //data数据源，'.vue'中的data不能指向对象，必须是一个函数
    data() {
      //这个return出去的{}中，可以定义数据。
      return {
        username: 'thisisname',
      };
    },
    methods:{
      changeName(){
        //在组件中，this就表示当前组件的实例对象。
        //组件里的this指向组件的实例
        console.log(this);
        this.username = "newname"
      }
    }
  };
</script>
​
//启用less要添加lang="less"
<style lang="less"> 
  .test-box{
    background-color: red;
    .h3{
      color: white;
    }
  }
</style>

组件使用的三个步骤

组件之间的父子关系

project-src-components

所有的组件都放在components里，App可以放到components外。

• 组件在被封装好之后：彼此之间是相互独立的，不存在父子关系。

• 在使用组件的时候：根据彼此的嵌套关系，形成了父子关系、兄弟关系。

三个步骤

1. 使用import语法导入需要的组件，import Left from '@/components/Left.vue'。

2. 使用 components 节点注册组件, 通过components注册的是私有子组件。

3. 以标签的形式使用刚才注册的组件。

在组件 A 的 components 节点下，注册了组件 F。 则组件 F 只能用在组件 A 中;不能被用在组件 C 中。

<template>
<div class="app-container">
  <h1>App 根组件</h1>
​
  <button @click="flag = !flag">Toggle Flag</button>
  <Test info="你好" v-if="flag"></Test>
​
  <hr />
​
  <div class="box">
    <!-- 渲染 Left 组件和 Right 组件 -->
    <!-- 3. 以标签形式，使用注册好的组件 -->
    <Left1></Left1>
    <Right></Right>
  </div>
  </div>
</template>
​
<script>
  // 1. 导入需要使用的 .vue 组件
  //左边的Left，Right仅是名字，但是名字须和components与div中的相同。
  //通常情况下，`@`符号在Vue项目中被配置为指向项目的根目录。这样做的好处是，无论在项目的哪个文件中，都可以使用`@`符号来导入其他文件，而无需担心相对路径的复杂性。
  import Left1 from '@/components/Left.vue'
  import Right from '@/components/Right.vue'
  import Test from '@/components/Test.vue'
​
  export default {
    data() {
      return {
        flag: true
      }
    },
    // 2. 注册组件
    components: {
      Left1,
      Right,
      Test
    }
  }
</script>

注册全局组件

在vue项目的main.js入口文件中，通过Vue.component()方法可以注册全局组件。

• '注册名称'，尽量使用大写开头，例如：MyCount。

• 组件自己里使用自己会报错。

// 导入需要被全局注册的那个组件
import Count from '@/components/Count.vue'
//参数1:字符串格式，表示组件的"注册名称"
//参数2:需要被全局注册的那个组件，与import后相同
Vue.component('MyCount', Count)