Vue组件

组件

Vue 组件是 Vue.js 框架中的核心概念之一，它是构建用户界面的可复用模块。Vue 组件是一个自包含的、独立的代码单元，可以封装应用程序的特定功能或界面元素。每个组件都有自己的状态、模板、方法和样式，它们可以嵌套在其他组件中，以构建复杂的用户界面。

以下是关于 Vue 组件的一些重要特点和概念：

1. 封装性：Vue 组件具有封装性，每个组件都可以包含自己的状态（数据）和行为（方法）。这使得代码更易于维护，因为每个组件只关注自己的功能。

2. 复用性：组件可以在应用程序中的多个地方复用。这意味着你可以编写一次组件，并在不同的页面或视图中多次使用它，以实现一致的功能和外观。

3. 独立性：每个组件都是独立的，它们不会干扰或影响其他组件。这使得并行开发和测试变得更容易。

4. 响应式：Vue 组件中的数据和视图之间建立了响应式的关系。当组件的数据发生变化时，相关的视图会自动更新，无需手动操作。

5. 单文件组件：Vue 允许你使用单文件组件（以 .vue 扩展名结尾）来组织组件的代码、模板和样式。这种方式将组件的结构更清晰地组织在一个文件中。

6. 生命周期钩子：Vue 组件具有生命周期钩子函数，你可以在组件的不同生命周期阶段执行自定义逻辑，例如在组件创建、更新或销毁时。

7. 自定义事件：组件之间可以通过自定义事件进行通信。一个组件可以触发事件，而另一个组件可以监听并响应这些事件，实现组件之间的交互和通信。

总之，Vue 组件是 Vue.js 中的核心概念，它们有助于构建复杂的用户界面和应用程序，使代码更易于管理、维护和扩展。组件化开发是现代前端开发的一种重要方法，它有助于提高代码的可重用性和可维护性。

代码示例

<html>
    <head>
        <title>vue 入门</title>
        <script src="https://cdn.staticfile.org/vue/3.2.36/vue.global.min.js"></script>
    </head>
    
    <body>
        <div id="root" > {{message}} </div>
    </body>
    
    <script>
        //定义helloword组件
        const helloword = {
            //data函数
            data() {
                return { 
                    message: 'helloword!'
                };
            }
        }

       //创建vue对象挂载到html元素上
       const app=Vue.createApp(helloword);
       //挂载到具体html元素之上
       app.mount('#root');
    </script>
</html>

代码解析

• {{message}}：这是 Vue.js 的模板语法。双大括号 {{}}`中的内容表示插值表达式，它会在页面渲染时被替换为 Vue 数据对象中对应属性的值。 - `const helloworld`：这是一个常量（变量不可重新赋值）的声明。在这里，我们将一个对象赋值给 `helloworld` 变量，该对象包含了组件的配置选项。Vue 组件通常以这种方式定义。 - 对象包含一个属性 `data`：这个属性是一个函数，用于返回组件的数据。在 Vue 组件中，`data` 函数返回一个包含组件数据的对象。在这个例子中，我们定义了一个名为 `message` 的数据属性，它的初始值是 `'helloworld!'`。 - `data()` 函数：Vue 组件的 `data` 属性是一个函数，而不是一个普通的对象。这是因为 Vue.js 3.x 引入了更严格的响应式系统。通过将数据定义在一个函数内，Vue 能够更好地跟踪和管理组件的状态。 - 总结来说，这段代码定义了一个 Vue 组件 `helloworld`，该组件包含一个数据属性 `message`，初始值为 `'helloworld!'`。你可以在组件的模板中使用 `{{ message }} 来显示这个数据属性的值。这是 Vue 组件的基本结构，你可以进一步在该组件中定义模板、方法、计算属性等，以构建更复杂的用户界面和交互逻辑。

DOM选择器

在 Vue.js 中，mount() 方法用于将 Vue 应用实例挂载（绑定）到一个特定的 DOM 元素上。你可以使用不同类型的选择器来指定要挂载到的元素，这取决于你想在页面的哪个位置渲染 Vue 应用。

以下是一些常见的选择器类型：

• ID 选择器：使用 # 符号后跟元素的 ID，以选择页面上具有特定 ID 的元素。例如，#app 选择器会选择具有 “app” ID 的元素。

  app.mount('#app');

• 类名选择器：使用 . 符号后跟元素的类名，以选择页面上具有特定类名的元素。例如，.my-component 选择器会选择所有具有 “my-component” 类名的元素。

  app.mount('.my-component');

• 元素选择器：使用元素名称，以选择页面上的特定 HTML 元素类型。例如，div 选择器会选择所有 <div> 元素。

  app.mount('div');

• 标签选择器：使用标签名称（例如，body、p、h1 等）来选择页面上的元素。这类似于元素选择器，但只匹配指定的 HTML 标签。

  app.mount('body');

• 属性选择器：使用元素的属性来选择页面上的元素。例如，[data-app] 选择器可以选择具有 data-app 属性的元素。

  app.mount('[data-app]');

Vue.createApp

Vue.createApp 是 Vue.js 3.x 中的一个方法，用于创建一个 Vue 应用实例。这个方法接受一个包含应用程序配置选项的对象，并返回一个代表 Vue 应用的实例，你可以使用这个实例来配置和管理你的应用。

下面是 Vue.createApp 的基本用法：

const app = Vue.createApp({
  // 应用程序的配置选项
});

在上面的示例中，app 是一个变量，它引用了通过 Vue.createApp 创建的 Vue 应用实例。你可以将应用程序的配置选项放在大括号内，以定义你的应用程序的行为、数据和方法等。

通常，配置选项包括以下一些常见属性：

• data：用于定义应用程序的响应式数据。
• methods：包含应用程序的方法。
• computed：包含计算属性。
• watch：包含监视属性变化的逻辑。
• template：定义应用程序的模板，如果不在组件内部使用单文件组件。

例如，以下是一个简单的示例：

const app = Vue.createApp({
  data() {
    return {
      message: 'Hello, Vue!'
    };
  },
  methods: {
    greet() {
      alert(this.message);
    }
  }
});

app.mount('#app');

在这个示例中，我们创建了一个 Vue 应用实例，并定义了一个包含数据属性 message 和方法 greet 的配置选项。最后，我们使用 app.mount('#app') 将应用挂载到具有 id 为 “app” 的 DOM 元素上。

组件对象

Vue 组件的常用对象选项包括以下几个：

1. data：

   • data 选项用于定义组件的数据属性。
   • 这些数据属性可以在组件的模板中使用，并可以通过双向数据绑定实时更新视图。
   • 示例：data() { return { message: 'Hello, Vue!' }; }

2. computed：

   • computed 选项用于定义计算属性。
   • 计算属性是基于数据属性计算的属性，它们的值会自动更新，只要相关的依赖数据发生变化。
   • 示例：computed: { computedProperty() { return this.message.toUpperCase(); } }

3. methods：

   • methods 选项用于定义组件的方法。
   • 这些方法可以在模板中调用，用于处理用户交互、触发事件等。
   • 示例：methods: { greet() { console.log('Hello, Vue!'); } }

4. watch：

   • watch 选项用于监听数据属性的变化，并在数据变化时执行相应的操作。
   • 通常用于异步操作、复杂计算或依赖多个数据属性的情况。
   • 示例：watch: { message(newValue, oldValue) { console.log('Message changed:', newValue); } }

5. props：

   • props 选项用于接收父组件传递的属性。
   • 父组件可以通过属性绑定将数据传递给子组件。
   • 示例：props: ['propName']

6. template：

   • template 选项用于定义组件的模板。
   • 模板包含HTML结构和Vue指令，用于渲染组件的界面。
   • 示例：template: '<div><p>{{ message }}</p></div>'

7. components：

   • components 选项用于注册子组件，使其在当前组件的模板中可用。
   • 示例：components: { 'my-component': MyComponent }

8. mounted：

   • mounted 钩子函数在组件被挂载到DOM后调用，用于执行一些初始化操作。
   • 示例：mounted() { console.log('Component mounted'); }

这些选项用于配置组件的不同方面，包括数据、计算属性、方法、模板、生命周期钩子等。组合使用这些选项可以创建具有丰富功能和交互性的Vue组件。

data

在 Vue.js 中，data 函数是组件选项之一，用于定义组件的响应式数据。这个函数返回一个包含组件数据属性的对象。以下是关于 data 函数的用法的详细介绍：

const app = Vue.createApp({
  data() {
    return {
      message: 'Hello, Vue!'
    };
  }
});

在上述示例中，data 函数被定义为组件的一个选项，并返回包含一个名为 message 的数据属性的对象。message 数据属性将成为组件的一个响应式属性，它的值可以在模板中使用并会在数据变化时自动更新视图。

响应式数据：

通过 data 函数定义的属性会变成组件的响应式数据。这意味着如果你修改了 message 的值，相关的视图会自动重新渲染以反映这些变化。这是 Vue.js 的核心特性之一。

函数形式：

data 必须以函数形式定义，而不是直接使用一个对象。这是因为 Vue 3.x 引入了更严格的响应式系统。使用函数形式有助于确保每个组件实例都有自己的数据副本，避免数据共享问题。

访问数据：

你可以通过 this 关键字在组件的方法、计算属性和模板中访问 data 中的属性。例如，this.message 将访问 message 属性的当前值。

初始化数据：

data 函数用于初始化组件的数据。你可以在其中定义任何你需要的数据属性，例如字符串、数字、数组、对象等等，以供组件使用。

动态数据：

你可以随时在组件中修改 data 中的属性，Vue.js 将负责确保这些更改被追踪并更新视图。

总之，data 函数是 Vue 组件中用于定义响应式数据的重要选项。它使你能够将数据与视图关联起来，实现动态和交互性的用户界面。在编写 Vue 组件时，经常需要使用 data 函数来定义和管理组件的状态。

methods

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Vue methods</title>
<script src="https://cdn.staticfile.org/vue/3.2.36/vue.global.min.js"></script>
</head>
<body>
<div id="app" class="demo"></div>

<script>
const app = Vue.createApp({
  data() {
    return { count: 4 }
  },
  methods: {
    increment() {
      // `this` 指向该组件实例
      this.count++
    }
  }
})

const vm = app.mount('#app')

document.write(vm.count) // => 4
document.write("<br>")
vm.increment()

document.write(vm.count) // => 5
</script>
</body>
</html>

• methods 中定义了一个 increment 方法，该方法用于递增 count 的值。

• 之后，使用 document.write 输出了 vm.count 的值。vm.count 表示 Vue 应用实例中的 count 数据属性的值。最初的输出是 4，然后调用 vm.increment() 方法递增了 count 的值，所以第二次输出是 5。

父组件与子组件

在 Vue 3 中，使用 createApp() 方法创建一个 Vue 应用实例时，确实会有一个默认的根组件（父组件）。这个默认的根组件是 Vue 3 应用的最顶层组件，它包裹了整个应用的内容，并提供了应用的入口点。

这个默认的根组件通常不需要显式地定义，因为 Vue 3 应用的整体结构就是基于这个根组件构建的。您可以在根组件中挂载其他组件、定义全局指令、注册全局组件等。

示例中的代码就是一个典型的 Vue 3 应用的结构，其中 app 是通过 createApp() 创建的默认根组件，然后通过 app.component() 方法注册了一个名为 button-counter 的全局子组件，以及使用 app.mount('#app') 方法将根组件挂载到具有 id 为 “app” 的 HTML 元素上。

这个默认的根组件可以视为整个应用的容器，它包含了其他组件，并负责管理整个 Vue 应用的生命周期。在通常情况下，大部分 Vue 3 应用不需要显式定义根组件，而是直接通过 createApp() 创建根实例即可。

全局与局部组件

在 Vue 3 中，您可以创建两种类型的组件：全局组件和局部组件。这两种组件有不同的作用范围和注册方式：

全局组件

• 全局组件是在整个 Vue 应用程序中都可用的组件。
• 一旦注册为全局组件，您可以在任何地方使用它，包括模板、组件以及其他全局组件中。
• 全局组件通常用于需要在多个组件之间共享的通用功能或UI元素。

注册全局组件的方式：

const app = Vue.createApp({...})

app.component('my-component-name', {
  /* ... */
})

全局组件案例

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Vue 测试实例 - 全局组件</title>
<script src="https://cdn.staticfile.org/vue/3.2.36/vue.global.min.js"></script>
</head>
<body>
<div id="app">
    <runoob></runoob>
</div>

<script>
 
// 创建一个Vue 应用
const app = Vue.createApp({})
 
// 定义一个名为 runoob 的新全局组件
app.component('runoob', {
    template: '<h1>全局组件!</h1>'
})
 
app.mount('#app')
</script>
</body>
</html>

局部组件

• 局部组件只在其父组件的范围内可用，不能在其他组件中直接使用。
• 局部组件通常用于构建特定页面或组件的一部分，以提高组件的封装性和可维护性。

注册局部组件的方式：

//定义组件
const ComponentA = {
  /* ... */
}
const ComponentB = {
  /* ... */
}
const ComponentC = {
  /* ... */
}


//引用组件
const app = Vue.createApp({
  components: {
    'component-a': ComponentA,
    'component-b': ComponentB
  }
})

局部组件案例

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Vue 测试实例 - 局部组件</title>
<script src="https://cdn.staticfile.org/vue/3.2.36/vue.global.min.js"></script>
</head>
<body>
<div id="app">
	<local-component></local-component>
</div>
<script>
	
	const localComponent= {
		template: '<h1>局部组件</h1>'
	}
	
	const app=Vue.createApp({
		components: {
		'local-component': localComponent
		}
	})
	
	app.mount('#app')

</script>
</body>
</html>

总结：

• 全局组件通过 app.component 方法在应用程序实例上注册，可在整个应用中使用。
• 局部组件通过在父组件的 components 选项中注册，只能在父组件的范围内使用。
• 通常，全局组件用于通用功能或UI元素，而局部组件用于构建特定页面或组件的一部分，以提高组件的封装性和可维护性。
• 使用适当的组件范围可以帮助管理复杂应用程序中的组件命名空间，减少组件之间的冲突。

参考资料

• https://www.runoob.com/vue3/vue3-components.html
• https://developer.aliyun.com/article/1306614