vue3 + TS + ElePlus 常见问题

问题1：语法糖中如何使用 props ？？？

使用 API defineProps

<script setup lang="ts">
const props = defineProps({
  foo: String
})
</script>

问题2： 父组件获取子组件实例（属性和方法）？？？

无法使用子组件内的方法，使用 <script setup> 的组件是默认关闭的——即通过模板引用或者 $parent 链获取到的组件的公开实例，不会暴露任何在 <script setup> 中声明的绑定。

可以通过 defineExpose 编译器宏来显式指定在 <script setup> 组件中要暴露出去的属性

使用 API defineExpose

<script setup>
import { ref } from 'vue'

const a = 1
const b = ref(2)

defineExpose({
  a,
  b
})
</script>

问题3：reactive 定义的数组变量如何正确赋值？？？

// 方法1
const arr = reactive([])
arr.push(...[1, 2, 3])
// 方法2
const state = reactive({
  arr: []
});
state.arr = [1, 2, 3]
// 方法3
const state = ref([])
state.value = [1, 2, 3]

问题4：vue3中ref赋值elePlus中date-picker不生效？？？

html部分

 <el-date-picker 
 v-if="sureDateType == 'year'" 
 v-model="value4" 
 type="year" 
 placeholder="请选择年" 
 />

js部分

// 获取当前日期方法
export const getdate = () => {
  const now = new Date()
  const year = now.getFullYear()
  const month = now.getMonth() + 1 < 10 ? `0${now.getMonth() + 1}` : now.getMonth() + 1
  const day = now.getDate() < 10 ? `0${now.getDate()}` : now.getDate()
  // 要转化为字符串 否者 总是 1970 ❌ 记得转化字符串 ✅
  return { year: year + '', month: month + '', day: day + '' }
}

let { year } = getdate()

const value4 = ref(year)

参考链接1 : url

参考链接2 : url2