一、父组件给子组件传值
-
子组件
ShipHomePortDialog
1.定义变量名称
<script lang="ts" setup>
const props = defineProps(['title'])
</script>
2.在template中使用变量
<h4>{{ title }}</h4>
3.在Script代码使用
var t = props.title
-
父组件
<ShipHomePortDialog v-if="ShipHomePortDialogVisible" :title="'标题'"></ShipHomePortDialog>
二、子组件给父组件触发事件
-
子组件
1.定义事件名称
const emit = defineEmits(['onClickOK', 'onClickCancel'])
2.在需要触发事件的地方使用
const data=
{
id: '1',
}
emit('onClickOK',data);
-
父组件
<ShipHomePortDialog @onClickOK="OnClickOKOnShipHomePortDlg" ></ShipHomePortDialog>
处理事件函数
function OnClickOKOnShipHomePortDlg(data:any)
{
console.log(data);
}
三、父组件调用子组件方法
-
子组件
定义方法
function removeAllPortContentPanel()
{
}
曝露方法
defineExpose({
removeAllPortContentPanel
})
-
父组件
调用方法
<PortListTreeView ref="PortTreeRef"></PortListTreeView>
const PortTreeRef=ref<any>();
PortTreeRef.value.removeAllPortContentPanel()