vue3 中的孩子传递给父亲（emit），父亲传递给孩子（props）一文取

初次写文章，为了方便自己之后回顾知识点，同时也希望可以帮到大家很好理解知识点，所以我开始了~

目录：

• 父传子（props）

  1. 直接传一个值
  2. 动态传值
  3. 传数组
  4. 传对象

• 子传父（emit）

父传子：props

父传子还可以分为几种情况：

1. 直接传一个值
   

2. 动态传值（也就是用 ： 绑定）
   

3. 传数组（Array）
   

4. 传对象（Object）
   

父组件文件：ParentComponent.vue

子组件文件：ChildComponent.vue

第一种，简单传值

<!-- 父组件 -->
<template>
    <h1>I am ParentComponent</h1>
    <ChildComponent msg="nice"/>
</template>

<script setup>
import ChildComponent from './ChildComponent.vue'

</script>

<!-- 子组件 -->
<template>
    <h2>I am ChildComponent</h2>
    <p>I want {{ props.msg }} from my Parent.</p>
</template>

<script setup>
import { defineProps } from 'vue';
const props = defineProps({
    msg:String,
})
</script>

运行结果：

ok，大家可能会有疑惑，defineProps是什么呢？

它其实就是一个API函数。defineProps 是 Vue 3 中的一个函数，用于定义组件的 props。与 Vue 2 中的 props 配置选项不同，使用 defineProps 函数定义的 props 是只读的响应式对象，它们的值由父组件传递而来，不能被子组件修改。这有助于提高组件的可维护性和可重用性，并减少不必要的副作用。 简单理解：就是用于拿父组件传过来的值！

第二种，动态传值

其实就是给父组件的msg前面加了个“：”，然后再在script标签里加上const message = "动态传值"，然后子组件不需要改动，所以子组件代码跟上面一致。

<!-- 父组件 -->
<template>
    <h1>I am ParentComponent</h1>
    <ChildComponent :msg="message"/>
</template>

<script setup>
import ChildComponent from './ChildComponent.vue'
const message = "动态传值"
</script>

运行结果：

插几句，看似动态传值，其实也没感觉有多动态啊hhhhhh~

第三种，传数组

<!-- 父组件 -->
<template>
    <h1>I am ParentComponent</h1>
    <ChildComponent :arrMsg="A"/>
</template>

<script setup>
import ChildComponent from './ChildComponent.vue'
const A = [
    {id:1,name:'Kiangkiang'},
    {id:2,name:'Xiaohong'},
    {id:3,name:'Xiaoma'}
]
</script>

<!-- 子组件 -->
<template>
    <h2>I am ChildComponent</h2>
    <h3>数组</h3>
    <ul v-for="item in props.arrMsg" :key="item.id">
        <li>{{ item.id }}-{{ item.name }}</li>
    </ul>
</template>

<script setup>
import { defineProps } from 'vue';
const props = defineProps({
    arrMsg:Array//接收父组件ParentComponent传过来的数组
})
</script>

运行结果：

其实大家会发现，没什么特别的，很简单吧！那么接下来换成一个对象，也是一个意思。

第四种，传对象

<!-- 父组件 -->
<template>
    <h1>I am ParentComponent</h1>
    <ChildComponent :list="ListMsg"/>
</template>

<script setup>
import ChildComponent from './ChildComponent.vue'
const ListMsg = {
    name:'Xiaoma',
    age:'18',
    gender:'Boy',
}
</script>

<!-- 子组件 -->
<template>
    <h2>I am ChildComponent</h2>
    <h3>个人信息</h3>
    <ul>
        <li>{{ props.list.name }}</li>
        <li>{{ props.list.age }}</li>
        <li>{{ props.list.gender }}</li>
    </ul>
</template>

<script setup>
import { defineProps } from 'vue';
const props = defineProps({
    list:Object,
})
</script>

运行结果：

子传父（emit）

ok，终于到这个相对难一点的，不过相信你看我这个，你就可以明白了。

<!-- 父组件 -->
<template>
    <h1>I am ParentComponent</h1>
    <ChildComponent @child-click="zCf"/>
    <h2>{{ x }}</h2>
</template>

<script setup>
import ChildComponent from './ChildComponent.vue'
import { ref } from 'vue';
const x = ref('')
const zCf = (value) => {
    x.value = value;
    console.log(x.value)
}
</script>

<!-- 子组件 -->
<template>
    <h2>I am ChildComponent</h2>
    <h3>使用emit实现子传父</h3>
    <button @click="ziChuanFu">点击我，子传父</button>
</template>

<script setup>
import { defineEmits } from 'vue';
const emit = defineEmits(['child-click'])
const ziChuanFu = () => {
    emit('child-click',1)
}
</script>

运行结果：

·没点击时：

·点击后：

ok，完事，但是当时我在看这个代码的时候，有一个小疑问？？？

就是：为什么在子组件里面点击按钮，触发了ziChuanFu方法后，在该方法里面又通过emit触发了child-click方法，那为什么在子组件触发的方法child-click会在父组件里有用？？？

答案是：

行啦，结束啦，希望对你有帮助！