vue3.0 + setup +lang=“ts“

只需要给 script 标签添加一个 setup 属性,那么整个 script 就直接会变成setup函数,所有顶级变量、函数,均会自动暴露给模板使用(无需再一个个 return了),开发效率将大大的提高!vue3.0 + setup +lang=“ts”

defineProps

来声明 props 相关信息。defineProps 接收的对象和组件选项 props 的值一样。
interface ListItem {
  name: string
  age: number
}
const props = defineProps<{
  msg: string
  title: string
  list: ListItem[]
}>()

withDefaults

// withDefaults 的第二个参数便是默认参数设置,会被编译为运行时 props 的 default 选项
interface ListItem {
  name: string
  age: number
}
interface Props {
  msg: string
  // title可选
  title?: string
  list: ListItem[]
}
const props = withDefaults(defineProps<Props>(), {
  title: '我是标题',
  // 对于array、object需要使用函数,和以前的写法一样
  list: () => []
})

defineEmits

编译器宏声明 emits 相关信息。
const emits = defineEmits<{
  (e: 'changeMsg', value: string): void
}>()

const handleChangeMsg = () => {
  emits('changeMsg', 'Hello TS')
}

useAttrs

<script setup>
import HelloWorld from './components/HelloWorld.vue'
</script>

<template>
  <HelloWorld class="hello-word" title="我是标题" />
</template>

// ./components/HelloWorld.vue
<script setup>
import { useAttrs } from 'vue'

const attrs = useAttrs()
// js中使用
console.log(attrs.class)  // hello-word
console.log(attrs.title)  // 我是标题
</script>

<template>
  <!-- 在模板中使用 $attrs 访问属性 -->
  <div>{{ $attrs.title }}</div>
</template>

useSlots

//在模板中使用 $slots 来访问 slots 数据。
//在 
                    
                    

你可能感兴趣的:(ts,vue,vue.js,javascript)