vue3父子组件传值

父往子里传：

son.vue
defineProps是定义组件的，类型、初始值、是否必传之类，定义了还需要再定义一个接收的对象

<div>{{ name }}</div>

const props = defineProps({  
  name: {
    type: String
  }
})

father.vue

<son name='1111'></son>

效果就是在子组件的展示位置展示出1111
虽然是在父页面展示出来的，但是父页面把值传给了子组件，然后子组件接收到再展示在自己身上，因为子组件就在父页面所以最终效果是在父页面展示出

子往父里传

father.vue

<son @change='test'></son>

son.vue
change

<button @click="test">测试</button>
 
const emits = defineEmits(['change'])
function test() {
  emits('change', 123)
}

ref传值

father.vue

<son ref='temp '></son>

const temp = ref()

function test(val: any) {
  temp.value.test()
}

son.vue
要把方法暴露出去，要不然父组件拿不到

function test() {
 console.log('1111')
}
defineExpose({ test })