vue 3.0组件传参调用方法

vue3.0组件传参

父组件

//引入子组件
import tabelList from "./tabel.vue";
//使用子组件
  <tabelList ref="reftabel" @refsh='handchange' :chgildData="tabeldata"></tabelList> 
  //调用子组件的方法或变量
  const reftabel=ref('')
  reftabel.value.childdata()
  
  //重点：子组件中要暴露出来（子组件代码）
  defineExpose({
  childdata,
});

子组件

import { defineProps,defineExpose,defineEmits} from "vue";

//1.父组件传值接收
const props = defineProps({
  //子组件接收父组件传递过来的值
  chgildData: String,
});

const { chgildData } = toRefs(props);

//2.调用父组件的方法
const emit = defineEmits(["refsh"]);
emit('refsh')
//3.暴露子组件的变量和方法
defineExpose({
  childdata,
});