文章目录
一、JS同步与异步调用
同步调用是指代码按照其编写的顺序执行，每个函数都必须等待前一个函数完成后才能执行。这种调用方式会阻塞代码的执行，直到当前函数执行完成才能执行下一个函数。
正常的直接代码写下来调用就是同步调用。
异步调用是指代码不按照其编写的顺序执行，而是在某些操作完成后再执行。例如，当我们使用 Ajax 请求数据时，我们可以在请求发送后继续执行代码，而不必等待请求完成。 异步调用不会阻塞代码的执行，可以在后台执行其他操作。
1、异步调用函数：使用回调函数实现异步调用
function asyncFunction(callback) {
console.log("Start");
setTimeout(function() {
console.log("End");
callback();
}, 2000);
}
console.log("Before function call");
asyncFunction(function() {
console.log("Callback");
});
console.log("After function call");
在这个例子中，我们定义了一个 asyncFunction 函数，它使用 setTimeout 函数模拟了一个异步操作，并在操作完成后调用了回调函数。在主程序中，我们先输出 “Before function call”，然后调用 asyncFunction 函数，并传入一个回调函数。由于 asyncFunction 是异步调用，因此代码不会等待操作完成，而是直接执行后面的代码。因此，输出的顺序为 “Before function call”、“Start”、“After function call”、2 秒后输出 “End”、“Callback”。
2、使用 Promise 实现异步调用：
function asyncFunction() {
console.log("Start");
return new Promise(function(resolve, reject) {
setTimeout(function() {
console.log("End");
resolve();
}, 2000);
});
}
console.log("Before function call");
asyncFunction().then(function() {
console.log("Promise resolved");
});
console.log("After function call");
在这个例子中，我们定义了一个 asyncFunction 函数，它返回一个 Promise 对象，并在异步操作完成后调用 resolve 函数。在主程序中，我们先输出 “Before function call”，然后调用 asyncFunction 函数，并使用 then 方法注册一个回调函数。由于 asyncFunction 是异步调用，因此代码不会等待操作完成，而是直接执行后面的代码。因此，输出的顺序为 “Before function call”、“Start”、“After function call”、2 秒后输出 “End”、“Promise resolved”。
3、使用 async/await 实现异步调用：
async function asyncFunction() {
console.log("Start");
await new Promise(function(resolve, reject) {
setTimeout(function() {
console.log("End");
resolve();
}, 2000);
});
}
console.log("Before function call");
asyncFunction().then(function() {
console.log("Promise resolved");
});
console.log("After function call");
在这个例子中，我们定义了一个 asyncFunction 函数，它使用 await 关键字等待异步操作完成，并在操作完成后继续执行。在主程序中，我们先输出 “Before function call”，然后调用 asyncFunction 函数，并使用 then 方法注册一个回调函数。由于 asyncFunction 是异步调用，因此代码不会等待操作完成，而是直接执行后面的代码。因此，输出的顺序为 “Before function call”、“Start”、“After function call”、2 秒后输出 “End”、“Promise resolved”。
二、Vue2基础知识
能使用vue Temple 调用data 的数据和methods 函数，通过v-for 遍历list 等构建web 页面。
能对axios 库进行二次封装，并对api 进行统一管理，能使用低代码平台strapi 等搭建简易cms。
能使用nuxt.js 开发基于SSR 渲染的网站，并使用commitlint 规范, husky 钩子等进行前端工程化管理
Vue2主要由以下几个部分构成：
这些是Vue2的主要构成部分：指令 & 实例、组件 & 模板、数据绑定和生命周期钩子。它们共同组成了Vue应用程序的基本结构，并提供了丰富的功能和开发方式。
-
指令（Directives）：Vue的指令是特殊的HTML属性，用于给元素添加特定的行为和功能。指令以 v- 前缀表示，并通过Vue实例中的数据进行动态绑定。例如，v-bind、v-on、v-if、v-for 等。
-
实例（Instance）：Vue应用程序的核心是Vue实例。使用 new Vue() 创建一个Vue实例，它是Vue应用程序的根实例，用于管理应用程序的数据、方法和生命周期钩子等。Vue实例允许你在模板中使用数据绑定、指令和事件处理等特性。
-
组件（Components）：Vue2支持组件化开发，允许将应用程序拆分为多个可重用的组件。组件是Vue实例的扩展，具有自己的模板、数据、方法和生命周期钩子。组件可以嵌套、复用，并通过通信机制实现组件之间的交互。
-
模板（Templates）：Vue使用基于HTML的模板语法，将Vue实例的数据和方法绑定到DOM上。模板可以包含插值表达式、指令、事件处理等，用于动态生成和更新DOM元素。
-
数据绑定（Data Binding）：Vue2提供了双向数据绑定的能力，可以将数据与模板进行动态绑定，当数据变化时，模板会自动更新，反之亦然。这样可以实现数据的响应式更新，简化了开发过程。
-
生命周期钩子（Lifecycle Hooks）：Vue实例有一系列的生命周期钩子函数，可以在不同的阶段插入代码逻辑。例如，created、mounted、updated 和 destroyed 等，可以在这些钩子函数中执行相应的操作。
1、基本概念 & dom中常用的v指令
安装Vue.js：你可以通过在HTML文件中引入Vue.js的CDN链接来使用Vue.js。在标签中添加以下代码：
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.js"></script>
创建Vue实例：在JavaScript文件中创建一个Vue实例来管理你的应用程序。
var app = new Vue({
el: '#app', // 绑定Vue实例到HTML元素
data: {
message: 'Hello Vue!' // 数据属性
},
methods: {
changeMessage: function () {
this.message = 'New message'; // 方法
}
}
});
模板语法：Vue使用一种简单的模板语法，让你可以将数据绑定到HTML中。在HTML文件中，你可以使用双花括号插值表达式来显示Vue实例中的数据。
事件处理：你可以使用v-on指令来监听DOM事件，并在触发时调用Vue实例中的方法。
<div id="app">
<p>{
{
message }}</p>
<button v-on:click="changeMessage">Change Message</button>
</div>
v-on（缩写为@）：用于监听DOM事件并触发相应的方法。可以监听任何DOM事件，如click、input、keydown等。例如：
<button v-on:click="handleClick">Click me</button>
条件渲染：你可以使用v-if指令根据条件来渲染或销毁HTML元素。
<div id="app">
<p v-if="isVisible">Visible</p>
<p v-else>Hidden</p>
</div>
列表渲染：你可以使用v-for指令根据数组或对象的数据来渲染列表。
<div id="app">
<ul>
<li v-for="item in items">{
{
item }}</li>
</ul>
</div>
v-show：根据条件判断是否显示元素（通过CSS的display属性）。例如：
<div v-show="isVisible">Visible</div>
v-bind（缩写为:）：绑定HTML属性或Vue实例的数据。例如：
v-bind（缩写为:）：用于动态地绑定HTML元素的属性。可以绑定任何HTML属性，例如class、style、href等。例如：
<img v-bind:src="imageSrc">
<div v-bind:class="{ active: isActive, 'text-danger': hasError }"></div>
v-model：在表单元素和Vue实例的数据之间创建双向绑定。例如：
<input v-model="message">
v-text：更新元素的文本内容。与双花括号插值表达式({ { }})类似，但是只会更新文本内容，不会解析HTML。例如：
<p v-text="message"></p>
v-html：更新元素的HTML内容。会将Vue实例中的数据解析为HTML，并更新到元素中。注意要谨慎使用，以避免XSS攻击。例如：
<p v-html="rawHtml"></p>
v-pre：跳过Vue实例中的元素或组件的编译过程，直接将其原始内容渲染到页面上。主要用于显示静态的、不需要动态绑定的内容。例如：
<pre v-pre>{
{
rawText }}</pre>
2、vue2的实例 & 数据绑定（先#el，再v-bind）
Vue2的实例是Vue应用程序的核心。你可以使用new Vue()来创建一个Vue实例，它允许你管理应用程序的数据、方法和生命周期钩子等。
在创建Vue实例时，你需要传入一个选项对象，这个对象包含了Vue实例的配置项。下面是一个基本的Vue实例的创建示例：
var app = new Vue({
el: '#app', // 将Vue实例挂载到指定的HTML元素上
data: {
message: 'Hello Vue!' // 数据属性
},
methods: {
changeMessage: function () {
this.message = 'New message'; // 方法
}
},
created: function () {
console.log('Vue实例已创建');
}
});
在上述示例中，创建了一个Vue实例，并将其挂载到id为app的HTML元素上。实例的配置选项包括：
- el：指定Vue实例要挂载的HTML元素的选择器或DOM元素。
- data：定义Vue实例的数据属性，这些属性可以在模板中进行数据绑定。
- methods：定义Vue实例的方法，可以在模板或其他方法中调用。
- created：钩子函数，在Vue实例创建后立即调用，可以执行一些初始化操作。
通过访问Vue实例，你可以获取和修改数据属性，调用方法，并根据需要监听生命周期钩子函数。例如，在模板中使用双花括号插值表达式可以获取数据属性的值：
<div id="app">
<p>{
{
message }}</p>
<button v-on:click="changeMessage">Change Message</button>
</div>
上述示例中，message属性的值会在Vue实例中进行动态绑定，并在模板中显示出来。点击按钮会调用changeMessage方法，修改message属性的值。
Vue实例提供了丰富的功能和选项，用于构建交互式的Web应用程序。你可以在实例中定义数据、方法、计算属性、监听器等，还可以使用指令、组件和路由等扩展Vue的功能。
————————————————————————————————————
Vue2提供了灵活而强大的数据绑定机制，使你可以将数据与模板进行动态绑定，实现数据的自动更新。Vue2的数据绑定主要包括以下几个方面：
1、插值表达式（Interpolation）：
Vue2使用双花括号{
{ }}来创建插值表达式，将Vue实例中的数据绑定到模板中。例如：
<p>{
{
message }}</p>
上述示例中，message是Vue实例中的一个数据属性，它的值会动态地插入到<p>标签内部。
2、指令（Directives）：指令是Vue中特殊的HTML属性，以v-开头。通过指令，你可以将元素的属性、事件和内容与Vue实例中的数据进行绑定。常用的指令有v-bind和v-on。例如：
<img v-bind:src="imageUrl">
<button v-on:click="handleClick">Click me</button>
上述示例中，v-bind指令将src属性与imageUrl数据进行绑定，实现动态的图片路径。v-on指令监听按钮的点击事件，并调用handleClick方法。
3、双向数据绑定（Two-way Data Binding）：
Vue2提供了v-model指令，用于实现表单元素的双向数据绑定。它可以将表单元素的值与Vue实例中的数据属性相互绑定，当表单元素的值改变时，数据属性也会自动更新。例如：
<input v-model="message">
上述示例中，message是Vue实例中的一个数据属性，输入框的值与message进行双向绑定，任一方的改变都会同步更新另一方。
4、计算属性（Computed Properties）：
Vue2允许你定义计算属性，它们可以根据其他数据属性的值进行计算，并返回一个新的值。计算属性可以在模板中进行数据绑定，当依赖的数据发生变化时，计算属性会自动重新计算。例如：
var app = new Vue({
data: {
firstName: 'John',
lastName: 'Doe'
},
computed: {
fullName: function () {
return this.firstName + ' ' + this.lastName;
}
}
});
上述示例中，fullName是一个计算属性，根据firstName和lastName的值计算出完整的姓名，并可以在模板中进行数据绑定。
通过这些数据绑定的机制，Vue2实现了数据的响应式更新，当数据发生变化时，相关的模板会自动更新，从而实现了数据和视图的同步。这大大简化了开发过程，提高了应用程序的可维护性和用户体验。
——————————————————————
你需要先使用el选项将Vue实例挂载到HTML元素上，然后才能在对应的子元素中使用v-bind进行数据绑定。
当Vue实例挂载到HTML元素后，Vue会将该HTML元素及其子元素作为Vue应用的管理范围。这意味着Vue实例可以访问和控制挂载元素及其子元素的数据、方法和指令。
因此，在挂载Vue实例之后，你可以在挂载元素的子元素上使用v-bind指令，将Vue实例中的数据绑定到子元素的属性上。这样，子元素的属性值将会随着Vue实例中的数据变化而更新。
以下是一个示例，展示了先使用el挂载Vue实例，然后在子元素中使用v-bind进行数据绑定的过程：
<div id="app">
<p v-bind:title="message">Hover over me</p>
</div>
var app = new Vue({
el: '#app',
data: {
message: 'This is a tooltip'
}
});
在上述示例中，先通过el选项将Vue实例挂载到id为app的HTML元素上。然后，在该元素的子元素
上使用v-bind指令，将message数据属性绑定到title属性上。当message的值发生变化时，子元素的title属性也会相应地更新。
因此，确保先使用el挂载Vue实例，然后再在对应的子元素中使用v-bind进行数据绑定，以确保Vue实例能够正确管理和更新绑定的数据。
3、Vue2的组件 & 模板 （template， script， export default）
-
组件（Components）：组件是Vue2中的核心概念，它将一个应用程序划分为多个独立且可复用的模块。每个组件都包含了自己的模板、数据、方法和样式，可以通过组合和嵌套来构建复杂的应用程序。组件使代码更易于维护、测试和重用，并提供了更好的组织结构。在Vue2中，你可以使用Vue.component方法或单文件组件（.vue文件）来定义组件。
-
模板（Templates）：模板是Vue2中用于描述组件的HTML代码。模板定义了组件的结构和布局，并使用Vue提供的指令和语法来实现动态数据绑定和逻辑控制。在模板中，你可以通过插值、指令、事件绑定等方式将数据和方法与HTML元素进行绑定。Vue的模板语法非常直观和灵活，使得你可以轻松地创建动态的、响应式的用户界面。
-
单文件组件（Single File Components）：单文件组件是Vue2中一种组织和编写组件的方式。它将组件的模板、逻辑和样式封装在一个单独的文件中，通常使用.vue作为文件扩展名。单文件组件提供了更好的代码组织和可维护性，使得开发者可以更清晰地定义和管理组件。单文件组件可以使用预处理器（如Babel、TypeScript、Sass等）来增强开发体验和功能。
在Vue2中，你可以使用全局注册和局部注册两种方式定义和注册组件。
全局注册组件：
全局注册允许你在应用的任何地方都可以使用该组件，它适用于在整个应用程序中广泛使用的组件。
Vue.component('component-name', {
// 组件的选项
});
其中，component-name是组件的名称，可以自定义。组件选项是一个包含模板、数据、方法等的对象，用于定义组件的行为和外观。
在模板中使用全局注册的组件，示例：
<div id="app">
<component-name></component-name>
</div>
局部注册组件：
局部注册允许你在特定的Vue实例或组件内部使用该组件，它适用于仅在特定范围内需要的组件。
在Vue实例或组件的选项中，使用components属性局部注册组件，语法如下：
new Vue({
components: {
'component-name': {
// 组件的选项
}
},
// 其他选项
});
其中，component-name是组件的名称，可以自定义。组件选项是一个包含模板、数据、方法等的对象，用于定义组件的行为和外观。
在模板中使用局部注册的组件，示例：
<div id="app">
<component-name></component-name>
</div>
无论是全局注册还是局部注册，一旦组件被注册，就可以在对应的模板中使用该组件，并根据组件选项定义的行为和外观进行渲染和交互。
以下是一个示例，展示了全局注册和局部注册组件的用法：
<div id="app">
<global-component></global-component>
<local-component></local-component>
</div>
// 全局注册组件
Vue.component('global-component', {
template: '<div>This is a global component</div>'
});
// 局部注册组件
var LocalComponent = {
template: '<div>This is a local component</div>'
};
new Vue({
el: '#app',
components: {
'local-component': LocalComponent
}
});
当涉及Vue2组件和模板的代码示例时，以下是一个简单的示例：
<!-- index.html -->
<div id="app">
<my-component></my-component>
</div>
// main.js
Vue.component('my-component', {
template: `
<div>
<h2>{
{ message }}</h2>
<button @click="updateMessage">Update Message</button>
</div>
`,
data() {
return {
message: 'Hello, Vue!'
};
},
methods: {
updateMessage() {
this.message = 'Updated message!';
}
}
});
new Vue({
el: '#app'
});
在上面的示例中，我们在index.html中定义了一个Vue实例，并在该实例中使用了<my-component>``</my-component>标签。这个标签代表了我们自定义的组件my-component。
在main.js中，我们使用Vue.component方法全局注册了my-component组件。组件的选项包含了一个模板，其中包含了一个<h2>标签和一个按钮。模板中使用了插值表达式{
{ message }}来展示组件里的数据，并使用@click指令绑定了按钮的点击事件。
组件的选项中还包含了一个data方法，返回一个包含了message属性的对象。message属性的初始值为’Hello, Vue!'。
组件的选项中还定义了一个methods对象，其中包含了一个updateMessage方法。这个方法在按钮点击时被调用，更新了message属性的值。
当应用程序运行时，<my-component>标签会被渲染为组件的模板，显示出Hello, Vue!的标题和一个按钮。当按钮被点击时，message属性的值会更新为’Updated message!'，从而导致模板中的数据和视图的更新。
这个示例展示了Vue2中组件和模板的基本用法，包括组件的定义、模板的使用、数据绑定和方法的触发。通过这种方式，你可以创建可复用的组件，并在模板中实现动态的数据渲染和交互行为。
在Vue2中，<template>标签是用于包裹Vue组件模板的特殊标签。它在Vue组件的定义中起到了一个容器的作用，用于封装组件的结构和布局，并且不会在最终渲染的HTML中被呈现。
使用<template>标签的主要目的是为了提供一个可以包含多个元素的块级容器，而无需引入额外的父级元素。在模板中，可以包含任意数量的HTML元素、指令、插值表达式和其他Vue模板语法。
以下是一个示例，演示了如何使用<template>标签来组织Vue组件的模板：
<template>
<div>
<h2>{
{
title }}</h2>
<p>{
{
message }}</p>
<button @click="handleClick">Click me</button>
</div>
</template>
<script>
export default {
data() {
return {
title: 'Hello, Vue!',
message: 'Welcome to my Vue component.'
};
},
methods: {
handleClick() {
alert('Button clicked!');
}
}
};
</script>
<style scoped>
h2 {
color: blue;
}
button {
background-color: green;
color: white;
}
</style>
在上述示例中，<template>标签包含了组件的整个模板内容，包括标题、消息和一个按钮。模板中使用了插值表达式{
{ title }}和{
{ message }}来动态显示数据，并使用@click指令绑定了按钮的点击事件。
注意到<template>标签本身不会在最终渲染的HTML中呈现，它只是用于组织和包装模板内容。这样，我们可以在不引入额外的无意义父级元素的情况下定义组件的结构。
此外，<template>标签还支持<slot>标签的使用，用于插入父组件传递的内容。这样可以更灵活地定义组件的布局和结构。
最后，需要注意的是，<template>标签支持scoped属性，可以将样式限定在当前组件内部。这意味着在<style scoped>标签中定义的样式只会应用于当前组件的模板，在其他地方的相同选择器不会被影响。
<script>标签和export default {}不是Vue实例本身，而是用于定义Vue组件的选项和导出组件的方式。
在Vue组件的定义中，<script>标签用于编写组件的逻辑部分，包括数据、方法、生命周期钩子等。<script>标签内部的内容会被Vue解析和执行，从而创建一个Vue组件实例。
export default {}语法是用于导出Vue组件的方式。在Vue组件的定义中，通过export default语法将组件的选项对象导出，使其可以在其他地方被引入和使用。这样，我们可以在其他Vue文件或入口文件中引入组件，并在Vue应用程序中注册和使用该组件。
以下是一个示例，演示了如何使用
<template>
<div>
<h2>{
{
message }}</h2>
<button @click="updateMessage">Update Message</button>
</div>
</template>
<script>
export default {
data() {
return {
message: 'Hello, Vue!'
};
},
methods: {
updateMessage() {
this.message = 'Updated message!';
}
}
};
</script>
在上述示例中，<script>标签内部定义了一个Vue组件的选项对象。选项对象包含了data属性，返回一个包含message属性的对象；还包含了一个methods对象，包含了一个updateMessage方法。
通过export default语法，将组件的选项对象导出，使其可以在其他地方被引入和使用。比如，在其他文件中可以使用import语法将该组件导入，并在Vue应用程序中注册和使用。
例如，假设上述组件定义在名为MyComponent.vue的文件中，我们可以在另一个文件中引入并注册它：
<!-- index.html -->
<div id="app">
<my-component></my-component>
</div>
// main.js
import Vue from 'vue';
import MyComponent from './MyComponent.vue';
Vue.component('my-component', MyComponent);
new Vue({
el: '#app'
});
在上述示例中，我们使用import语法将MyComponent.vue文件中导出的组件引入，并使用Vue.component方法将组件注册为全局组件。这样，我们就可以在应用程序中使用<my-component>标签，并实例化该组件。
MyComponent已经在main.js中被注册为全局组件，并通过Vue.component方法进行了注册。接下来，你可以在应用程序的模板中使用<my-component>标签来调用该组件。
在这个例子中，MyComponent组件的模板可能包含了标题、按钮和其他的内容。当<my-component>标签被渲染时，模板中的内容将会显示在页面上。
通过在模板中使用组件的标签，你可以在Vue应用程序中多次调用和实例化同一个组件，从而在不同的位置展示组件的内容和行为。
总结起来，<script>标签和export default {}语法是用于定义和导出Vue组件的方式。<script>标签内部的内容会被Vue解析和执行，创建一个Vue组件实例。通过export default语法，我们可以在其他文件中引入和注册该组件，从而在Vue应用程序中使用它。
3、生命周期钩子
在Vue2中，组件的生命周期钩子是一组方法，它们在组件的不同生命周期阶段被调用，允许你在特定的时间点执行自定义逻辑。以下是Vue2中最常用的生命周期钩子：
beforeCreate: 在实例被创建之前调用。此时组件的实例还未初始化，无法访问到组件的数据和方法。
created: 在实例创建完成后调用。此时组件的实例已经创建，可以访问到组件的数据和方法，但尚未挂载到DOM上。
beforeMount: 在组件挂载到DOM之前调用。此时组件已经编译完成，但尚未替换挂载点的内容。
mounted: 在组件挂载到DOM之后调用。此时组件已经被插入到页面中，可以访问到组件的DOM元素，以及通过this.$el访问到组件的根DOM元素。
beforeUpdate: 在组件更新之前调用。当组件的数据发生变化时，会触发重新渲染，而在重新渲染之前会调用beforeUpdate钩子。
updated: 在组件更新之后调用。当组件的数据发生变化，并且重新渲染完成后会调用updated钩子。此时DOM已经更新，可以执行与DOM交互的操作。
beforeDestroy: 在组件销毁之前调用。在组件被销毁之前，可以进行一些清理工作，比如清除定时器、取消订阅等。
destroyed: 在组件销毁之后调用。在组件被销毁后，可以执行一些最终的清理工作，此时组件的实例已经不可用。
除了上述常用的生命周期钩子外，Vue2还提供了一些其他的生命周期钩子，如activated、deactivated、errorCaptured等，用于处理组件的高级用途和特殊情况。
通过在组件中定义这些生命周期钩子方法，你可以在不同的阶段执行自定义的逻辑，比如在创建组件前初始化数据、在组件更新后触发额外的操作等。生命周期钩子为你提供了控制组件行为的灵活性，并允许你与组件的生命周期进行交互。
需要注意的是，在Vue3中，生命周期钩子发生了一些改变，一些钩子被重命名或合并，因此在Vue3中使用时需要注意区别。
4、Vue2父子组件传值（Props，$emit）
在Vue2中，父组件可以向子组件传递数据，同时子组件也可以通过事件向父组件发送数据。以下是几种常见的父子组件传值方式：
1、Props（属性）：父组件可以通过props将数据传递给子组件。在子组件中，通过props选项声明接收父组件传递的属性，并在模板中使用。父组件的数据变化会自动反映到子组件中。
<!-- ParentComponent.vue -->
<template>
<div>
<child-component :message="parentMessage"></child-component>
</div>
</template>
<script>
import ChildComponent from './ChildComponent.vue';
export default {
components: {
ChildComponent
},
data() {
return {
parentMessage: 'Hello from parent'
};
}
};
</script>
<!-- ChildComponent.vue -->
<template>
<div>
<p>{
{
message }}</p>
</div>
</template>
<script>
export default {
props: ['message']
};
</script>
2、自定义事件：子组件可以通过$emit方法触发自定义事件，并将数据传递给父组件。在父组件中，通过在子组件的标签上监听自定义事件，可以捕获子组件发送的数据。
<!-- ParentComponent.vue -->
<template>
<div>
<child-component @custom-event="handleChildEvent"></child-component>
</div>
</template>
<script>
import ChildComponent from './ChildComponent.vue';
export default {
components: {
ChildComponent
},
methods: {
handleChildEvent(data) {
console.log('Received data from child:', data);
}
}
};
</script>
<!-- ChildComponent.vue -->
<template>
<div>
<button @click="sendDataToParent">Send Data to Parent</button>
</div>
</template>
<script>
export default {
methods: {
sendDataToParent() {
const data = 'Data from child';
this.$emit('custom-event', data);
}
}
};
</script>
这样，当子组件中的按钮被点击时，会触发sendDataToParent方法，该方法通过$emit触发了名为custom-event的自定义事件，并将数据传递给父组件。父组件中的handleChildEvent方法会捕获并处理子组件发送的数据。
这些是Vue2中常用的父子组件传值方式。通过props和自定义事件，父子组件之间可以进行数据的双向传递和通信。
5、Vue2组件引用（ref， $, this等符号）
在Vue2中，使用ref属性可以给Vue组件或DOM元素添加一个引用。通过ref属性，你可以在父组件中访问子组件或DOM元素，并通过this.$refs来获取对它们的引用。
当你在模板中使用ref="xxx"给组件或DOM元素添加引用后，Vue会在父组件的$refs对象中创建一个属性，属性名为你指定的引用名（xxx），属性值为对应的组件实例或DOM元素。
然后，通过this.$refs.xxx可以直接访问到这个组件实例或DOM元素，从而进行操作或调用其方法。
例如，假设你有一个子组件ChildComponent，在父组件的模板中使用ref为它添加引用：
<!-- ParentComponent.vue -->
<template>
<div>
<child-component ref="myChild"></child-component>
<button @click="callChildMethod">Call Child Method</button>
</div>
</template>
<script>
import ChildComponent from './ChildComponent.vue';
export default {
components: {
ChildComponent
},
methods: {
callChildMethod() {
this.$refs.myChild.childMethod();
}
}
};
</script>
在上述例子中，ChildComponent被添加了ref="myChild"引用。然后，在父组件的callChildMethod方法中，通过this.$refs.myChild可以获取到ChildComponent的实例，并调用其childMethod方法。
需要注意的是，this.$refs是一个对象，属性名对应ref的值，属性值对应组件实例或DOM元素。因此，在父组件中可以通过this.$refs.xxx来访问到对应的组件或DOM元素，然后进行进一步的操作。
然而，需要注意的是，在使用this.$refs时需要注意生命周期的时机，确保在组件已经被渲染到DOM后再进行访问，否则可能会获取到undefined或不准确的结果。
希望这能帮助你理解Vue2中通过ref和this.$refs进行组件或DOM元素的引用与调用的原理。
——————————————————————————————————
在Vue2中，$符号是Vue实例的一个特殊属性和方法的前缀，用于访问Vue实例的内置属性、方法以及插件提供的功能。它提供了一种方便的方式来与Vue实例进行交互。
以下是一些常见的以$开头的属性和方法：
$data: 用于访问Vue实例的数据对象。可以通过this.$data来获取或修改数据。
$props: 用于访问父组件传递给当前组件的属性。可以通过this.$props来获取父组件传递的属性。
$emit: 用于在组件内部触发自定义事件。通过this.$emit(event, data)可以触发一个自定义事件，并传递相应的数据。
$on: 用于在组件内部监听自定义事件。通过this.$on(event, callback)可以监听一个自定义事件，并指定对应的回调函数。
$watch: 用于监听Vue实例中的数据变化。通过this.$watch(property, callback)可以监听指定属性的变化，并执行相应的回调函数。
$router: 用于访问Vue Router的实例，提供了导航相关的方法和属性，比如this.$router.push()用于进行页面跳转。
$store: 用于访问Vuex的store实例，提供了状态管理的方法和属性，比如this.$store.dispatch()用于触发一个action。
除了上述内置属性和方法外，插件开发者也可以通过$符号将自定义的属性和方法添加到Vue实例上，以便在组件中使用。
总之，$符号是Vue实例的一个特殊前缀，用于访问Vue实例的内置属性、方法以及插件提供的功能，提供了一种方便的方式来与Vue实例进行交互和操作。
——————————————————————
在Vue实例中，使用this.xxx可以获取到以下值：
数据属性（Data Properties）：当你在Vue实例的data选项中定义了一个属性时，可以通过this.xxx来获取和修改该属性的值。例如，如果在data中定义了message属性，可以使用this.message来获取和修改它的值。
计算属性（Computed Properties）：当你在Vue实例的computed选项中定义了一个计算属性时，可以通过this.xxx来获取该计算属性的值。例如，如果有一个计算属性fullName，可以使用this.fullName来获取它的值。
方法（Methods）：当你在Vue实例的methods选项中定义了一个方法时，可以通过this.xxx()来调用该方法。例如，如果有一个方法sayHello，可以使用this.sayHello()来调用它。
监听器（Watchers）：当你在Vue实例的watch选项中定义了一个监听器时，可以通过this.xxx来获取被监听的属性的当前值。例如，如果有一个监听器watch: { message: function(newVal) { // do something } }，可以使用this.message来获取message属性的当前值。
生命周期钩子（Lifecycle Hooks）：当你在Vue实例中使用生命周期钩子函数时，例如created、mounted等，可以通过this.xxx来访问Vue实例本身。例如，在created钩子函数中，可以使用this.$el来访问Vue实例的根DOM元素。
需要注意的是，除了上述情况，this.xxx无法直接获取到其他自定义属性或方法。如果想要在Vue实例中添加自定义属性或方法，可以通过Vue实例的methods选项或通过$符号添加到Vue实例上。
总之，通过this.xxx可以获取到Vue实例中的数据属性、计算属性、方法、监听器的当前值以及访问Vue实例本身的特定属性和方法。