vue3 +ts 学习记录

1 父子传参
父传子
父组件

<TestFuzichuancan :title="title"/>
const title = '父组件标题'

子组件

import { defineProps  } from 'vue';
interface Props {title?: string,arr: number[];
}
const props = withDefaults(defineProps<Props>(), {title: '默认消息',arr: () => [3, 4, 5],});或
const props = withDefaults(defineProps<{title: string;arr: number[];
}>(), {arr: () => [3, 4, 5],title: 'aa44a'
});

子传父
父组件
方法1

 <TestFuzichuancan @on-click="onclick"/>

子组件

const emit = defineEmits(['on-click'])
const send=()=>{emit('on-click',{name:'aaa',age:12})
}

方法2
父组件

 <TestFuzichuancan @on-click="onclick"/>

子组件

const emit = defineEmits<{(e:'on-click',data:object):void
}>()
const send=()=>{emit('on-click',{name:'aaa',age:12})
}

父元素获取子元素中的数据和方法
子元素

const send=()=>{emit('on-click',{name:'aaa',age:12})
}

父元素

<TestFuzichuancan  ref="childRef" /><button @click="diaoyong">调用子组件方法</button>const childRef = ref(null);  // 名称要保持和父原色的ref 值保持一致const diaoyong=()=>{if(childRef.value){childRef.value.eat()}
}