持续创作，加速成长！这是我参与「掘金日新计划 · 10 月更文挑战」的第20天，点击查看活动详情
一.3.x和2.x的区别：
3.x 0配置，移除了build和config等目录，将配置文件隐藏了
3.x 提供了 vue ui 命令，提供了可视化的配置
移除了static文件夹，新增了 public 文件夹 并将 index.html 移入了改文件夹。
移除了filters过滤器等
二.Teleport:(传送门)
可以将teleport将下面的元素通过to 添加对应的元素中
teleport to="body"> <div class="modal"> <div> I'm a teleported modal! (My parent is "body") <button @click="modalOpen = false"> Close </button> </div> </div> </teleport>
三.emits:
声明从父组件继承来的事件
如果 子组件自定义事件命名为@click="$emit('click', $event)",即定义了click，
父组件也使用click监听，就会触发两个click，所以需要定义emits: ['click']让父组件上的click指向子组件定义的
子组件内部：
export default {
emits: ['click']
}
同时还可以验证事件：
emits: {
// 验证submit 事件
submit: ({ email, password }) => { if (email && password) { return true } else { console.warn('Invalid submit event payload!') return false } }
},
setup(prop,content){
content.emit('submit', { email, password })
}
四.获取dem节点 Ref
<div v-for="item in list" :ref="setRef"></div>
let setRefArray= ref([])
const setRef= el => { if (el) { setRefArray.push(el) } }
五.v-if和v-for变化
现在v-if优先级高于v-for了，同时template可以写:key了
六.生命周期变化以及使用
与vue2 对比
// nextTick，set，delete等
// 需要按需引入
import { nextTick } from 'vue'
nextTick(() => { // 一些和DOM有关的东西 })
七.css使用js变量
let color=ref('#999999')
h1 {
color: v-bind(color);
}
八.组件自定义v-mode
vue2:
- 父组件
<template>
<custom-input v-model="searchText"></custom-input>
<!-- 等价于 -->
<custom-input :value="searchText" @input="searchText = $event" />
<!-- 等价于 -->
<custom-input :title="searchText" @change="searchText = $event" />
</template>
<script>
export default {
data(){
return {
searchText:'',
}
},
watch:{
searchText(value){
console.log(value)//改变的
}
}
}
</script>
- 子组件（custom-input）
<template>
<div>{{searchText}}</div>
</template>
<script>
export default {
// 这一块是自定义的
model:{
prop:"searchText",
event:'change'
}
poprs:{
searchText:''
},
// 如果不写model这个，父组件传递过来的v-model值默认就是 value
//props: {
//value是默认双向绑定值，必须在props里面声明
//value: String
//},
created(){
this.$emit('change','修改searchText')//可以实现修改searchText
// this.$emit('input', '修改searchText')//如果使用默认的v-model值，改变的方法就是input
},
}
</script>
vue3:(可以通过v-model:title，v-model:title1实现多个v-model)
一： 我们使用v-model:title,给v-model传递一个title的参数,来让子组件可以接收到属性名为title的prop;子组件使用event" />
```
- 子组件（custom-input）
```html
<template>
<div >
<button @click="$emit('update:title', '子组件传递给父组件的值')">子组件点击</button>
<div>{{title}}</div>
</div>
</template>
<script>
import { defineComponent } from "vue";
export default defineComponent({
props: {
title: {
type: String,
required: true
}
}
}
</script>
```
二：
- 父组件 ```html ```
- 子组件（custom-input）
```html
<template>
<div >
<button @click="$emit('update:modelValue', '子组件传递给父组件的值')">子组件点击</button>
<div>{{title}}</div>
</div>
</template>
<script>
import { defineComponent } from "vue";
export default defineComponent({
props: {
modelValue: {
type: String,
required: true
}
}
}
</script>
```
