首页 前端知识 Vue中的子传父、父传子详细(vue2子传父、父传子,vue3子传父、父传子)

Vue中的子传父、父传子详细(vue2子传父、父传子,vue3子传父、父传子)

2024-05-10 22:05:24 前端知识 前端哥 157 930 我要收藏

简介:

  • 在Vue中,组件之间的数据传递是一个非常重要的概念。父子组件之间的数据传递,特别是子组件向父组件传递数据(子传父),是构建复杂Vue应用的基础。

  • 子传父,在父组件中给子组件标签绑定一个自定义事件,给这个事件挂载需要调用的方法,然后在子组件的方法通过this.$emit(‘自定义事件名’)来调用这个方法。

  • 父传子,在父组件中给子组件标签绑定一个自定义事件,给这个事件挂载需要调用的方法,在子组件的方法通过this.$emit(‘自定义事件名’)来调用这个方法。

⭐Vue2中的子传父、父传子

子传父(Vue2)

一、基本原理

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

二、代码实例

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

<!-- ChildComponent.vue -->  
<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事件来接收子组件传递的数据。

<!-- ParentComponent.vue -->  
<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> <!-- 在模板中直接使用props中的数据 -->  
  </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>  
    <!-- 在父组件模板中使用子组件,并监听 child-message 事件 -->  
    <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>  
    <!-- 在父组件中使用子组件,并通过 props 传递数据 -->  
    <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>  
    <!-- 显示从父组件接收到的 message -->  
    <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> 中定义了组件的逻辑,也使得组件的结构更加清晰和易于维护。

转载请注明出处或者链接地址:https://www.qianduange.cn//article/7977.html
标签
评论
发布的文章

HTML5(H5)中的Web Workers

2024-05-19 09:05:52

HTML5

2024-02-27 11:02:15

HTML5 <option> 标签

2024-05-19 09:05:51

@JsonProperty 注解详解

2024-05-19 09:05:27

大家推荐的文章
会员中心 联系我 留言建议 回顶部
复制成功!