Vue中的子传父、父传子详细（vue2子传父、父传子，vue3子传父、父传子）

落日映苍穹つ 2024-04-22 22:30 71阅读 0赞

#### **简介：** ####

*  #### **在Vue中，组件之间的数据传递是一个非常重要的概念。父子组件之间的数据传递，特别是子组件向父组件传递数据（子传父），是构建复杂Vue应用的基础。** ####
 *  #### **子传父，在父组件中给子组件标签绑定一个自定义事件，给这个事件挂载需要调用的方法，然后在子组件的方法通过this.$emit(‘自定义事件名’)来调用这个方法。** ####
 *  #### **父传子，在父组件中给子组件标签绑定一个自定义事件，给这个事件挂载需要调用的方法，在子组件的方法通过this.$emit(‘自定义事件名’)来调用这个方法。** ####

#### **⭐Vue2中的子传父、父传子** ####

#### **子传父（Vue2）** ####

#### **一、基本原理** ####

#### **在Vue中，子组件向父组件传递数据通常是通过触发自定义事件来实现的。子组件中可以通过$emit方法触发一个事件，并传递一些数据给父组件，而父组件则可以通过监听这个事件来接收子组件传递的数据。** ####

#### **二、代码实例** ####

#### **子组件的实现   1、首先，我们创建一个子组件ChildComponent，并在其中定义一个方法用于触发事件传递数据给父组件。** ####

<template>  
      <div>  
        <button @click="choseSend">发送给父组件</button>  
      </div>  
    </template>  
      
    <script>  
    export default {  
      data() {  
        return {  
          msg: '这是子组件的消息'  
        };  
      },  
      methods: {  
        choseSend() {  
          // 通过$emit触发一个名为'child-message'的自定义事件，并传递message数据  
          this.$emit('childMessage', this.msg);  
        }  
      }  
    };  
    </script>

#### **2、父组件的实现   接下来，我们在父组件ParentComponent中使用ChildComponent，并监听child-message事件来接收子组件传递的数据。** ####

<template>  
      <div>  
        <h2>父组件</h2>  
        <p>从子组件接收的消息: {
       { receivedMessage }}</p>  
        <ChildComponent @childMessage="handleChildMessage" />  
      </div>  
    </template>  
      
    <script>  
    import ChildComponent from './ChildComponent.vue';  
      
    export default {  
      components: {  
        ChildComponent,
        //可以使用组件懒加载
        //ChildComponent: () => import("./ChildComponent.vue"),
      },  
      data() {  
        return {  
          receivedMsg: ''  
        };  
      },  
      methods: {  
        handleChildMessage(msg) {  
          // 父组件接收到子组件通过事件传递的数据，并更新本地数据  
          this.receivedMsg = msg;  
        }  
      }  
    };  
    </script>

以上就是子传父的具体过程，在上面代码中，我们做了以下操作：

*  在ChildComponent中，我们定义了一个choseSend方法，当按钮被点击时，通过this.$emit触发一个名为childMessage的事件，并传递msg数据。
 *  在ParentComponent中，我们引入了ChildComponent，并在模板中使用它。同时，我们监听了childMessage事件，并在事件触发时调用handleChildMessage方法，将接收到的数据存储在receivedMsg中。

#### **三、本章小结，子传父是Vue组件间通信的一种常见方式，通过自定义事件，子组件可以灵活地传递数据给父组件。在实际开发中，我们需要根据具体需求设计事件名称和数据结构，确保组件之间的通信清晰、高效。** ####

#### **父传子（Vue2）** ####

#### **一、基本步骤** ####

#### **在父组件中定义要传递给子组件的数据，需要在父组件的模板中，使用子组件标签，并通过属性（props）将数据传递给子组件。在子组件中，通过props选项来声明接收的数据。** ####

####    **二、代码示例** ####

#### **1、父组件（ParentComponent.vue）** ####

<template>  
      <div>  
        <h2>父组件</h2>  
          
        <ChildComponent :message="parentMessage" />  
      </div>  
    </template>  
      
    <script>  
    import ChildComponent from './ChildComponent.vue';  
      
    export default {  
      components: {  
        ChildComponent // 注册子组件  
      },  
      data() {  
        return {  
          // 定义要传递给子组件的数据  
          parentMessage: '这是父组件传递给子组件的消息'  
        };  
      }  
    };  
    </script>

在父组件中，我们定义了一个parentMessage数据，然后在模板中使用<ChildComponent :message="parentMessage" />将parentMessage作为属性传递给子组件。这里属性名前面的冒号 :message 是Vue的特殊语法，表示这是一个动态绑定，即绑定的值是响应式的，如果父组件中parentMessage的值发生改变，子组件接收到的值也会相应地更新。

#### **2. 子组件（ChildComponent.vue）** ####

<template>  
      <div>  
        <h3>子组件</h3>  
        <p>{
       { message }}</p>   
      </div>  
    </template>  
      
    <script>  
    export default {  
      props: {  
        // 声明接收的数据  
        message: {  
          type: String, // 指定数据的类型  
          required: true, // 指定该数据是必需的  
          default: '' // 指定默认值  
        }  
      },
      //或者使用props的数组形式接收数据，这样不用指定类型，二选一
      props: ["message"],  
    };  
    </script>

在子组件中，我们通过props选项声明了一个message属性，用来接收父组件传递过来的数据。在模板中，我们可以直接使用\{ \{ message \}\}来显示这个数据。

####    **三、注意事项** ####

1.  #### **props的命名：在子组件中声明props时，尽量使用camelCase（驼峰命名法），而在父组件中传递props时，可以使用kebab-case（短横线分隔命名法），Vue会自动将短横线命名转换为驼峰命名。** ####
2.  #### **props的类型和验证：在子组件中声明props时，可以指定其类型、是否必需以及默认值，这样有助于确保父组件传递过来的数据符合预期。** ####
3.  #### **避免直接修改props：在子组件中，应该避免直接修改通过props传入的数据，因为props是单向数据流，子组件不应该修改父组件的状态。如果需要基于props进行某些操作或计算，可以在子组件中定义计算属性或方法。** ####

#### **⭐Vue3中的子传父、父传子（一、二）** ####

#### **子传父（Vue3）** ####

#### **一、实例代码，使用<script setup>**</script>语法糖 ####

#### **1、子组件，ChildComponent.vue** ####

<template>  
      <button @click="sendToParent">发送消息给父组件</button>  
    </template>  
      
    <script setup>  
    import { defineEmits } from 'vue';  
      
    // 定义组件可以触发的自定义事件  
    const emit = defineEmits(['child-message']);  
      
    // 定义要发送给父组件的消息  
    const message = '这是子组件的消息';  
      
    // 定义发送消息给父组件的方法  
    const sendToParent = () => {  
      // 使用 emit 触发自定义事件并传递数据  
      emit('child-message', message);  
    };  
    </script>

ChildComponent.vue 组件中的注释解释了每一部分代码的作用。我们定义了一个 message 常量来存储要发送给父组件的消息，然后创建了一个 sendToParent 方法来触发 child-message 事件并传递消息。

#### **2、父组件，ParentComponent.vue** ####

<template>  
      <div>  
        <h2>父组件</h2>  
        <p>从子组件接收的消息: {
       { receivedMessage }}</p>  
          
        <ChildComponent @child-message="handleChildMessage" />  
      </div>  
    </template>  
      
    <script setup>  
    import { ref } from 'vue';  
    import ChildComponent from './ChildComponent.vue';  
      
    // 创建一个响应式数据来存储从子组件接收到的消息  
    const receivedMessage = ref('');  
      
    // 定义处理子组件发送消息的方法  
    const handleChildMessage = (message) => {  
      // 更新父组件中接收到的消息  
      receivedMessage.value = message;  
    };  
    </script>

ParentComponent.vue 组件中的注释解释了如何在模板中使用子组件并监听 child-message 事件。在 <script setup> 部分，我们创建了一个响应式数据 receivedMessage 来存储接收到的消息，并定义了一个 handleChildMessage 方法来处理从子组件发送过来的消息，这样就完成了子组件向父组件传递数据。

#### **父传子（Vue3）** ####

#### **二、实例代码，使用<script setup>**</script>语法糖 ####

#### **1、父组件，ParentComponent.vue** ####

<template>  
      <div>  
        <h2>父组件</h2>  
          
        <ChildComponent :message="parentMessage" />  
      </div>  
    </template>  
      
    <script setup>  
    import { ref } from 'vue';  
    import ChildComponent from './ChildComponent.vue';  
      
    // 声明子组件  
    defineComponents({  
      ChildComponent  
    });  
      
    // 定义响应式数据 parentMessage  
    const parentMessage = ref('这是父组件传递给子组件的消息');  
    </script>

在这个中组件中导入了 ref 函数来创建一个响应式数据 parentMessage，并通过 props 将这个数据传递给子组件 ChildComponent，并且在父组件的模板中，通过 :message="parentMessage" 将数据绑定到子组件的 message prop 上。

#### **2、子组件，ChildComponent.vue** ####

<template>  
      <div>  
        <h3>子组件</h3>  
          
        <p>{
       { message }}</p>  
      </div>  
    </template>  
      
    <script setup>  
    import { defineProps } from 'vue';  
      
    // 使用 defineProps 声明从父组件接收的 props  
    const props = defineProps({  
      message: {  
        type: String, // 指定 message 的类型为字符串  
        required: true, // message 是必需的  
        default: '' // 默认值  
      },
    });  
    //同样，这里可以使用数组形式声明 props ，这样不用指定类型，二选一
    const props = defineProps(['message']);  
    </script>

子组件使用 defineProps 函数来声明从父组件接收的 message prop。在子组件的模板中，通过插值表达式 \{ \{ message \}\} 来显示接收到的消息。

#### **二、小结** ####

1.  #### **在 <script setup> 中，你不需要显式地导出任何东西，因为所有顶层变量、函数和组件都会自动暴露给模板和其他组件。** ####
2.  #### **这种语法糖使得组件的编写更加简洁和直观，减少了样板代码，提高了开发效率。同时，由于它直接在 <script setup> 中定义了组件的逻辑，也使得组件的结构更加清晰和易于维护。** ####