https://juejin.cn/post/7133514836667236365#heading-10

react-konva 伸缩网格画布

https://blog.csdn.net/zaihukeji/article/details/119823494

MySQL 导出文件路径权限

## 组件结构

组件允许我们将 UI 划分为独立的、可重用的部分，并且可以对每个部分进行单独的思考


![image.png](https://oss.silon.vip/img/636ba0598bebe2c1f2ef23b9cfff9fba.image.png)

## 定义组件


### 使用构建步骤 .vue

当使用构建步骤时，我们一般会将 Vue 组件定义在一个单独的 .vue 文件中，这被叫做单文件组件 (简称 SFC)

```
# a.vue

<script>
export default {
  data() {
    return {
      count: 0
    }
  }
}
</script>

<template>
  <button @click="count++">You clicked me {{ count }} times.</button>
</template>
```

### 不使用构建步骤 .js

这里的模板是一个内联的 JavaScript 字符串，Vue 将会在运行时编译它

```js
# a.js

export default {
  data() {
    return {
      count: 0
    }
  },
  template: `
    <button @click="count++">
      You clicked me {{ count }} times.
    </button>`
}
```

## 注册组件

### 全局注册

全局注册的组件可以在此应用的任意组件的模板中使用

```js
import { createApp } from 'vue'

const app = createApp({})

app.component(
  // 注册的名字
  'MyComponent',
  // 组件的实现
  {
    /* ... */
  }
)
```

```js
// 如果使用单文件组件，你可以注册被导入的 .vue 文件
import MyComponent from './App.vue'

app.component('MyComponent', MyComponent)


// 可以链式调用
app
  .component('ComponentA', ComponentA)
  .component('ComponentB', ComponentB)
  .component('ComponentC', ComponentC)
```


:::info{title="注意"}
全局注册虽然很方便，但有以下几个问题：

1. 全局注册，但并没有被使用的组件无法在生产打包时被自动移除 (也叫“tree-shaking”)。
   如果你全局注册了一个组件，即使它并没有被实际使用，它仍然会出现在打包后的 JS 文件中。

2. 全局注册在大型项目中使项目的依赖关系变得不那么明确。在父组件中使用子组件时，不太容易定位子组件的实现。
   和使用过多的全局变量一样，这可能会影响应用长期的可维护性。


:::

### 局部注册

局部注册的组件需要在使用它的父组件中显式导入，并且只能在该父组件中使用。
它的优点是使组件之间的依赖关系更加明确，并且对 tree-shaking 更加友好

- 局部注册需要使用 components 选项

```html
<script>
import ComponentA from './ComponentA.vue'

export default {
  // 局部注册
  components: {
    // key: 注册组件名，value: 组件的实现
    ComponentA: ComponentA
    // 简写
    ComponentA,
    
  }
}
</script>

<template>
  <ComponentA />
</template>
```


## 使用组件

要使用一个子组件，我们需要在父组件中导入它。

- 若要将导入的组件暴露给模板，我们需要在 components 选项上注册它。
- 组件将会以其注册时的名字作为模板中的标签名。
- 子组件名称建议使用大驼峰命名，用于区分 html 标签

```
<script>
import ButtonCounter from './ButtonCounter.vue'

export default {
  // 注册子组件
  components: {
    ButtonCounter
  }
}
</script>

<template>
  <h1>Here is a child component!</h1>
  // 插入子组件
  <ButtonCounter />
</template>
```

## 传递 props

### 声明 props
Props 是一种特别的 attributes，你可以在组件上声明注册

当一个 prop 被注册后，可以像这样以自定义 attribute 的形式传递数据给它
```html
// 使用子组件
<BlogPost title="My journey with Vue" />
<BlogPost title="Blogging with Vue" />
<BlogPost title="Why Vue is so fun" />
```

```html

<script>
export default {
  // 注册 props
  props: ['title']
}
</script>

<template>
  <h4>{{ title }}</h4>
</template>
```

##  子组件调用父组件方法修改父组件

子组件可以通过调用内置的 `$emit` 方法，通过传入事件名称来抛出一个事件

```html
# 父组件

data() {
  return {
    posts: [
      /* ... */
    ],
    postFontSize: 1
  }
}

<BlogPost
  ...
  // 向子组件传递方法
  @enlarge-text="postFontSize += 0.1"
 />
```


```html


<script>
export default {
  props: ['title'],
  // 声明组件可能触发的所有事件
  emits: ['enlarge-text']
}
</script>

<template>
  <div class="blog-post">
    <h4>{{ title }}</h4>
    // 调用父组件传递的方法
    <button @click="$emit('enlarge-text')">Enlarge text</button>
  </div>
</template>
```

## 插槽 slot

slot 与 react 中的 children 类似，是一个内容占位符

```html
<AlertBox>
  // 这里的内容会填充到子组件的 slot 中
  Something bad happened.
</AlertBox>
```

```html
# 子组件
<template>
  <div class="alert-box">
    <strong>This is an Error for Demo Purposes</strong>
    <slot />
  </div>
</template>

<style scoped>
.alert-box {
  /* ... */
}
</style>
```

## 动态组件 `:is`

有些场景会需要在两个组件间来回切换，比如 Tab 界面

传给 :is 的值可以是以下几种：

被注册的组件名
导入的组件对象

```html

<component :is="currentTab"></component>
```


:::info{title="注意"}
当使用 `<component :is="...">` 来在多个组件间作切换时，被切换掉的组件会被卸载。
可以通过 `<KeepAlive>` 组件强制被切换掉的组件仍然保持“存活”的状态。
:::

vue学习（3）：vue 组件

vue 学习（2）：vue语法

## 官方文档

[官方文档](https://cn.vuejs.org/guide/quick-start.html#try-vue-online)

## 准备工作
- 安装 node16 或更新版本
- 编写 vue 项目推荐 ide 配置为`Visual Studio Code` + `Volar 扩展(Vue Volar extension Pack)`
  可以创建一个 vue 项目工作区，并把该拓展添加至工作区建议中
  ![image.png](https://oss.silon.vip/img/1e615d829ed71786ca4bf1844ac9e997.image.png)




## 创建 vue 项目

```
npm init vue@latest
```

运行后会让指定项目文件夹名称，及一些脚手架功能是否开启

- typescript
- jsx
- vue-router（单页应用路由）
- pinia（状态管理）
- vitest（单元测试）
- cypress（单元测试、端对端测试）
- eslint（代码 lint）

![image.png](https://oss.silon.vip/img/1b143034c51b40cca9eedd0585fc6495.image.png)

至此，就可以安装依赖，并以开发模式启动了
所有操作命令，可以在 `package.json` 中查看

```
cd 项目文件夹
# 安装依赖（也可以使用 yarn 等工具）
npm install

# 以开发模式启动
npm run dev

# 打包项目
npm run build
```

## 应用入口

应用入口文件在 `项目文件夹/src/main.js`

> 每个 Vue 应用都是通过 `createApp` 函数创建一个新的 应用实例

>应用实例必须在调用了 `.mount()` 方法后才会渲染出来。该方法接收一个“容器”参数，可以是一个实际的 DOM 元素或是一个 CSS 选择器字符串


![image.png](https://oss.silon.vip/img/5e7aaa4da00ddd1ad61f9cd695f870e8.image.png)

```js
/**
 * 该操作与图中等效
 */
const app = createApp(App)
app.mount('#app')
```

## 应用配置

应用实例会暴露一个 .config 对象允许我们配置一些应用级的选项，例如定义一个应用级的错误处理器，用来捕获所有子组件上的错误：

```js
app.config.errorHandler = (err) => {
  /* 处理错误 */
}
```
应用实例还提供了一些方法来注册应用范围内可用的资源，例如注册一个组件：

```js
app.component('TodoDeleteButton', TodoDeleteButton)
```
这使得 TodoDeleteButton 在应用的任何地方都是可用的。

## 多应用实例

多应用实例大多用于：使用 Vue 来增强服务端渲染 HTML，将多个小应用挂载在不同元素上

createApp API 允许你在同一个页面中创建多个共存的 Vue 应用，而且每个应用都拥有自己的用于配置和全局资源的作用域。

```js
const app1 = createApp({
  /* ... */
})
app1.mount('#container-1')

const app2 = createApp({
  /* ... */
})
app2.mount('#container-2')
```

组件结构

模板语法

官方文档

准备工作