问题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