ui开发记录components 安装vue-router 需要配置router，做三件事在main.js文件新建hi

QQ浏览器截图20220412134255.png

1. 进入要创建项目的目录

2. 全局安装create-vite-app
yarn global add create-vite-app@1.18.0
或者
npm i -g create-vite-app@1.18.0

3. create-vite-app 项目名称
或者
cva 项目名称

4. cd 项目名称

5. yarn install

6. yarn dev 开启本地服务器进行开发

当前vite版本v1.0.0-rc.3

components

当import 的名字和组件名称一样时，components可以缩写
import Topnav from '../components/Topnav.vue';

export default {
  name: 'Home',
  components: {Topnav:Topnav}
  // 缩写components: {Topnav}
};

安装vue-router

使用命令查看vue-router 所有的版本号
`npm info vue-router versions`

安装yarn add vue-router@4.0.0beta.3

需要配置router，做三件事

在main.js文件新建history对象
新建router对象
app.use(router)

import {createWebHashHistory,createRouter} from 'vue-router'

const history = createWebHashHistory()
const router = createRouter({
  history:history,
  routes:[
    {
      path: '/', 
      component: Home
    }
  ]
})

const app = createApp(App);
app.use(router);
app.mount('#app');

在已引入xxx.vue模块时，出现找不到此模块问题

出现原因是因为 TyoeScript只能理解.ts文件，无法理解.vue文件

解决办法

可以搜索vue 3 can not find module找答案

创建shims-vue.d.ts,告诉TS如何理解.vue文件

declare module '*.vue' {
  import { ComponentOptions } from 'vue'
  const componentOptions: ComponentOptions
  export default componentOptions
}

关于找不到scss模块

安装sass 版本号1.26.10
yarn add sass

Provide / Inject 的用法

无需深层嵌套就可以实现父组件向子组件传递数据
在App组件中有两个（设为1，2）组件，点击1里面的icon，隐藏2里面的aside
需要在其1,2组件的父组件里使用provide来设置可以被app子组件访问的函数
1,2组件就可以用inject来获取使用这个数据

ref是干嘛的

其实就是一个ref盒子，在setup()里设置这个盒子里的默认参数
下面这个例子中通过ref设置bool的默认参数是false
如果需要改变这个值需要加上bool.value = true

<Switch v-model:value="bool"/>

export default {
  name: 'SwitchDemo',
  components: {Switch},
  setup() {
    const bool = ref(false);
    return {bool};
  }
};

2. toRefs()  通过它将 y 复制其所有特性并重新命名
它是将别的函数和响应式的函数链接起来:意思就是改个函数名
下面中将 y 函数改成 x 那么x就拥有了和 y 一样的属性
const y = reactive({
  foo:1,
  bar:2
})

const x = toRefs(y)

y.foo++  === x.foo.value
console.log(x.foo.value)
// 2


3. toRef()  通过它拿到 y 其中一个属性
const x = toRef(y,'foo')

x.value === y.foo

reactive 和ref一样但是它不需要.value，一般用于处理复杂类型

methods

<button @click="add">+1</button>

methoud: {
  这里面写事件处理函数,比如
  add(){
    this.count += 1      
  }
}

vue3 之 setup() | v-model | context.emit

setup()是vue3里面的一个函数api,它里面有两个参数props和context

因为在setup中我们不能使用this.$,所以在setup中vue设计了context这个属性，它等价于this.$ = context

content

context是vue3里setup()的第二个参数
context.emit() 实则为this.$emit() // 用来绑定事件
console.log({...context})  // ...

v-model去这个链接查看

关于属性继承inheritAttrs，$attrs的用法

在父组件ButtonDemo中引用子组件Button时，因为父组件有@click/@focus等属性，所以在子组件中就跟着自带了@click等事件注意：如果button外包裹了div,则div也附有这些属性，这是vue设计的自带属性继承

那如果我们要选择只有谁继承怎么办，我们可以用$attrs这个属性

子组件 Button.vue

<template>
  <div :size="size">
    <button v-bind="rest">
      <slot/>
    </button>
  </div>
</template>

<script lang="ts">
export default {
  name: 'Button',
  // 关闭继承属性
  inheritAttrs: false,
  props: {},
  setup(props, context) {
    // 除了size, 其它都绑定到rest上
    // $attrs 等价于 context.attrs
    const {size, ...rest} = context.attrs;
    return{size, rest};
  }
};
</script>

父组件 ButtonDemo.vue

<template>
  <div>Button 示例</div>
  <h1>示例1</h1>
  <div>
<!--    事件名：点击/选中/鼠标悬停-->
    <Button @click="onClick"
            @focus="onClick"
            @mouseover="onClick"
    >你好
    </Button>
  </div>
</template>

具名插槽的使用

在子组件使用 v-slot:content
<template v-slot:content>
  <div>自定义内容</div>
  <div>自定义内容</div>
</template>

在父组件这样使用
<slot name="content"/>

teleport的使用

控制div在哪个标签下渲染，防止BFC问题
<teleport to="body">
  <div></div>
</teleport>

如何获取插槽内容

setup(props,context) {}
//
console.log({context.slots.default()})

ui开发记录