vue3 的父子组件传值

这里是父组件

组件要通过 components 声明一下 在setup里声明你要传过去的值,我们这里传的是 一个数组对象,声明过后通过return抛出

在子组件里面简单的接受一下

然后循环一下渲染到页面上去 add方法是我要 通过子组件给父组件进行传值

<div>
    <!-- 这里是子组件 -->
    <li v-for="(v,i) in list" :key="i" @click="add(v.name)">{{v.name}}</li>
</div>

这里是方法:子组件往父组件内进行传值

 export default {
    props:['list'],
    setup(props,context) {
        const list = props.list
        const add = (val) => {
            context.emit('xiao',val)
        }
        return { add,list }
    },
}

在父组件内进行接收 赋值 xiao是接收的方法 li内是渲染接收过来的值

<template>
  <div class="home">
    <!-- 这里是父组件 -->
    <commit :list="list" @xiao="xiao"></commit>
    <li :style="{'color':'red'}">{{name}}</li>
  </div>
</template>

在 setup内声明一个变量

 // 子组件传来的变量要 赋值给他
    const name = ref('')

然后进行变量的赋值和抛出

 // 接受传过来的值
    const xiao = (val) => {
      name.value = val
    }

    // 抛出
    return {list,xiao,name}

点击li后的效果