vue3父子组件传值

父往子里传:

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

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

father.vue


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

子往父里传

father.vue


son.vue
change


 
const emits = defineEmits(['change'])
function test() {
  emits('change', 123)
}

ref传值

father.vue



const temp = ref()

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

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

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

你可能感兴趣的:(vue.js,前端)