vue3父子组件之间的传值

1.父组件 parent.vue

<template>
  <div>
	//父组件使用:name传值给子组件
    <child :name="name" @change="change"/>
    {{user}}
  </div>
</template>

<script>
import {ref} from 'vue'
import child from './components/child.vue'
export default{
  components:{
    child
  },
  setup(){
    const name=ref('张三');
    const user=ref('');
    const change=(val)=>{//接收子组件的方法
      user.value=val
    }
    return{
      name,
      user,
      change
    }
  }
}
</script>

2.子组件 child.vue

<template>
  <div class="hello">
    <h1>{{name}}</h1>
  </div>
</template>

<script>
export default{
  props:['name'],    //接收父组件过来的值
  setup(props, context){
    context.emit('change','李四')//传值给父组件
  }
}
</script>