vue2过渡vue3小记（终）单文件组件写vue项目vue单文件组件的使用，是必不可少的。 <script setup

SFC语法糖

`<script setup>`的使用

说明：当使用 <script setup> 的时候，任何在 <script setup> 声明的顶层的绑定 (包括变量，函数声明，以及 import 引入的内容) 都能在模板中直接使用。
什么意思呢？看代码：

<script setup>
//组件
import MyComponent from './MyComponent.vue'

//import导入内容
import { capitalize } from './helpers'

// 变量
const msg = 'Hello!'

// 函数
function log() {
  console.log(msg)
}
</script>

<template>
  <div @click="log">{{ msg }}</div>
  <div>{{ capitalize('hello') }}</div>
  <MyComponent />
</template>

总结：也就是说在<script setup>中，import导入内容、变量、函数都是可以直接使用的不用再return暴露，包括组件不再需要另外components。

响应式

响应式使用响应式 APIs就可以了，很简单。看代码一目了然：

//注意是在单文件组件中
<script setup>
//添加对象
const obj = reactive({ count: 0 })
//改变reactive添加的对象的值可参考
for (const key in obj) {
   // obj[key]=newdata[key]
}

//添加数组
const arr = ref([])
//添加基本类型
const data = ref('')

</script>

//ps:如果将对象分配为 ref 值，则它将被 reactive 函数处理为深层的响应式对象。

vue3单文件组件中-组件的传值和事件调用

组件传值大致和vue2区别不大，只是写法上面的区别。

父传子props/ref

-------------props--------------
//父
<child :data="data" ></child>
<script setup>
    let data=ref('传值')
</script>

//子
<script setup>
//获取props值
const props = defineProps({
  data: String
})
</script>
-------------ref--------------

//父
<child ref="childRefs" ></child>
<script setup>
    let childRefs = ref(null);
    childRefs.value.childRefsFn('传值')
</script>

//子
<script setup>
//获取数据
const childRefsFn = (data) =>{
    console.log(data)
}

defineExpose({
  childRefsFn
})

</script>

总结：props使用defineProps，ref使用defineExpose声明。

子传父emits

//父
<child @change="change" ></child>
<script setup>
    const change = (data) => {
        console.log(data)
    }
</script>

//子
<script setup>
const emit = defineEmits(['change'])
emit("change",'传值给父组件');
</script>

总结：emit使用defineEmits声明

跨组件传值

之前我们说过组合API-Provide / Inject

vue2过渡vue3小记（终）