vue3+ts父组件调用子组件的方法

父组件调用子组件的方法

1.首先在子组件暴露方法

// 引用暴露方法
import { defineExpose } from 'vue'

// 需要暴露的方法
const getListSelect = async () => {
  let result: AttrResponseList = await attrListData(oneId.value,)

  if (result.code == 200) {
    category3IdList.value = result.data
  }
}

// 暴露方法给父组件
defineExpose({
  getListSelect
})

2.在父组件中使用子组件方法

// 子组件添加 ref="childRef"
<Category ref="childRef"/>

import { ref } from 'vue'

// 定义子组件实例
const childComp = ref<any>(null);

// 调用子组件的方法
childComp.value.getListSelect();

子组件向父组件传值emit

子组件

import { onMounted, ref, defineEmits, defineProps, defineExpose } from 'vue'

// 向父组件传值
const emit = defineEmits(['valueChange'])

// 向父组件传值的方法
emit('valueChange', category3IdList.value)

父组件

<Category @valueChange="getList" />

// 获取子组件传过来的值
const getList = (list: AttrResponseListData[]) => {
  console.log(list, threeId);
  category3IdList.value = list 
}

父组件向子组件传值props

父组件

<Category :scence="scence" />

// 要传过去的变量
const scence = ref<boolean>(false)

子组件接收

// 接受父组件传过来的值
const props = defineProps({
  scence: {
    type: Boolean
  }
})

// 使用方法
props.scence