vue3.2语法差别(持续更新)

this

参考文档:组合式 API | Vue.js

3.0可以在挂载函数打印this,是个组件实例,3.2用普通写法打印出来的是proxy,用setup语法糖,也就是

import { getCurrentInstance } from 'vue'
打印
console.log(getCurrentInstance());//

打印出来是一个普通对象,里面的proxy等于this

 

打印为true

---

插槽

3.0插槽传入改为v-slot:名字,不要引号

打印context的slots

 

3.2要通过获取实例函数上面的proxy才看得到

---

当然支持简写,用＃

---

 attrs没变

但是attrs还好,父组件传来的东西我不接受就塞到attrs里面

当然也可以直接使用,但是不推荐,因为没了类型限制

<h1>{{ $attrs.hello }}</h1>

---

---

子传父

3.0版本,从context拿出emit

 父组件

 3.2子传父

const emit = defineEmits(['hello'])
function up() {
  emit('hello', '你好,爸爸')
}

父组件

<haizi @hello="sayhi"></haizi>

---

---

父传子

3.0直接props接受

3.2

 当然也可以写类型推断

defineProps({
  msg: String
})

参考文档:单文件组件 <script setup> | Vue.js