vuejs3.0 从入门到精通——组件传值方式1——props/$emit（父子传值 ）

组件传值方式1 —— props / $emit（父子传值 ）

一、父传子

1.1、父组件通过 props 传递数据

    在父组件中，创建了一个名为List的子组件实例，并通过:msg="msg"语法将父组件的msg数据传递给子组件。这里的msg是一个响应式引用（使用ref创建），初始值为'这是父传过去的数据'。

?

1 2 3 4 5 6 7 8 9 10 11

<template>     <div>         <List :msg="msg"></List>     </div> </template>   <script setup lang="ts"> import List from '@/components/List.vue' import { ref } from 'vue' let msg = ref('这是父传过去的数据'); </script>

• • :msg="msg"：这里的冒号（:）是v-bind:的简写(详细见：https://vuejs.org/api/built-in-directives.html#v-bind)，用于动态绑定一个或多个属性，或组件 prop 到表达式的计算值。在这个例子中，它将 msg prop 绑定到msg的当前值。
  • ref：是 Vue 3 中的响应式 API 的一部分，用于创建一个响应式的引用。

1.2、子组件

    在子组件中，使用了defineProps函数来定义接收的 props，这里定义了 msg 这个 prop，并指定了它的类型和默认值。

?

1 2 3 4 5 6 7 8 9 10 11 12 13 14

<template>     <div>         这是子组件 ==> {{ msg }}     </div> </template>   <script setup lang="ts"> defineProps({       //defineProps 是用来定义组件的 props 的一个函数     msg: {          //msg 是这个组件接收的一个 prop,它有以下属性         type: String,       //表示这个 prop 的类型应该是字符串         default: 'hello',   //表示如果没有提供这个 prop, 那么它的默认值会是 'hello'     } }) </script>

• • defineProps：是 Vue 3 Composition API 的一部分，用于在 setup 函数中定义组件的 props。它允许你以类型安全的方式定义 props，并提供了对默认值和验证的支持。
  • msg：是定义的一个 prop，它的类型是 String，这表示这个 prop 应该接收一个字符串。如果没有传递任何值，那么它的默认值会是 'hello'。
  • 在模板中，通过 {{ msg }} 语法，将接收到的 msg prop 显示出来。

二、子传父

  在 Vue 3 中，子组件向父组件传递数据的一种常见方式是通过$emit派发事件。

2.1、子组件中通过$emit派发事件

    在子组件中，你可以使用$emit方法来触发一个自定义事件。你可以在这个事件中传递任何你想要传递给父组件的数据。

2.1.1、使用$emit的注意事项

• • 确保在子组件中触发的事件名与父组件中监听的事件名保持一致。
  • 如果在子组件的 setup 方法中使用$emit,确保从 setup 函数的参数中获取 emit 函数。
  • 在使用$emit时，确保事件名和参数是有效的和有意义的，以便于代码的可读性和维护性。

?

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25

<template>     <div>     // 这里定义了一个子组件的模板。它包含一个显示 num 的文本。         这是子组件 ==> {{ num }}     //这里定义了一个子组件的模板。它包含一个 button 按钮。     //按钮上有一个 @click 监听器，它会在按钮被点击时触发 changeNum 方法。         <button @click='changeNum'>按钮</button>     </div> </template>   <script lang="ts"> import { defineComponent, ref } from 'vue'; export default defineComponent({     setup(_, { emit }) {         let num = ref(100); // num 是一个响应式引用,初始值为100         const changeNum = () => {             emit('fn', num.value);  // 触发一个名为 'fn' 的自定义事件，并传递 num 的当前值         }         return {             num, // 把 num 暴露给模板             changeNum // 把 changeNum 方法暴露给模板         }     } }); </script>

2.1.2、父组件中监听子组件的事件

    在父组件的模板中，可以监听子组件触发的自定义事件。当监听到这个事件时，可以调用父组件中的一个方法来处理这个事件。

?

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23

<template>     <div>         //@fn 是监听子组件触发的名为 fn 的事件。当这个事件被触发时，它会调用名为 handleFn 的父组件方法         <child-component @fn="handleFn"></child-component>     </div> </template>   <script lang="ts"> import ChildComponent from '@/components/List.vue' export default {     components: {         ChildComponent     },     methods: {           //payload 就是子组件通过 $emit 传递的数据         handleFn(payload: number) {             // 打印子组件传递的数据             console.log('Received payload:', payload);         }     } } </script>

另外一种实现方式 <script setup lang=‘ts’>

2.2 A组件(Child)

?

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29

<template>     <div>         <h1>{{ str }}</h1>         <button @click="changeA">按钮</button>     </div> </template>   <script setup lang='ts'>   //从 Vue 库中导入 ref 函数。ref 是 Composition API 的一部分，用于创建响应式引用。 import { ref } from 'vue';   //创建一个响应式引用 str，并初始化为字符串 "这是A组件的数据"。 let str = ref('这是A组件的数据');   /*     使用 defineEmits 函数定义一个名为 fn 的自定义事件。     该组件就可以向外发送名为 fn 的事件，并传递数据。 */ const emit = defineEmits(['fn']);   /*     定义一个 changeA 方法。     当该方法被调用时（比如点击按钮），它会使用 emit 发送一个 fn 事件，并传递当前 str 的值。 */ const changeA = () => {     emit('fn', str); }; </script>

2.3 父组件

?

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15

<template>     <div>         <A @fn="handleFn"></A>         <B></B>     </div> </template>   <script setup lang="ts"> import A from './A.vue' import B from './B.vue'   const handleFn = (payload: any) => {     console.log('Received payload:', payload); }; </script>