【vue3父子组件传参】

父传子

在父组件的子组件标签中定义一个属性，在子组件中用defineProps接收父组件传来的值

父组件

<todoSon :msg="msg"></todoSon>

// 导入子组件
import todoSon from '@/components/todoSon.vue'

let msg = ref('父传子')

子组件

<div>
  <h1>{{msg}}</h1>
</div>

// 子组件用defineProps接收父组件传来的值
defineProps<{msg}>()

子传父

在父组件的子组件标签中定义一个自定义事件，用自定义事件来接收子组件传来的参数，在子组件中用defineEmits向父组件传参

父组件

<todoSon :msg="msg" @todofather="todofather"></todoSon>
 <h1>{{haha}}</h1>

// 导入子组件
import todoSon from '@/components/todoSon.vue'
let haha = ref('')

// 自定义事件接收子组件传来的值
const todofather = (data)=>{
  console.log(data)
  haha.value = data
}

子组件

// 子组件用defineEmits像父组件传参
const emit = defineEmits(['todofather'])
// 自定义事件，传递的值
emit('todofather','子传父')

vue2和vue3父子传参的区别

vue2中父传子：父组件通过自定义属性发送，子组件通过props接收。
vue3中不同的是：父组件中引入子组件后，不需要注册可直接使用，子组件中通过defineProps方法接收。
vue2中子传父：子组件通过this.$emit发送，父组件通过自定义事件接收。
vue3中不同的是：父组件中引入子组件后，不需要注册可直接使用，子组件中通过defineEmits方法发送。