vue3初体验-父子组件-hooks 写法

typescript 写法

<script setup lang="ts">
import { reactive,defineExpose } from 'vue'

const list = reactive<number[]>([4, 5, 6])
// 定义props
defineProps<{
    title:string,
    data:number[]
}>()

// 定义事件提交
const emit = defineEmits(['on-click'])

const clickTap = () => {
    emit('on-click', list)
}

// 定义属性暴露

defineExpose({
    list
})
</script>

        

          
        
        
        

          

          AI 代码解读
        
      
      

另外一种定义参数的方法

type Props = {
    title?: string,
    data?: number[]
}
withDefaults(defineProps<Props>(), {
    title: "张三",
    data: () => [1, 2, 3]
})

        

          
        
        
        

          

          AI 代码解读
        
      
      

javaScript 写法

defineProps({
  title: {
    default: "",
    type: string,
  },
  data: Array,
});

        

          
        
        
        

          

          AI 代码解读
        
      
      

使用

<Menu ref="menus"></Menu>;
const menus = ref(null);
console.log(menus.value); // {list:[]}

        

          
        
        
        

          

          AI 代码解读