Vue3父子双向传值【典型可复用代码】

蓝色烟火8633

已于 2023-09-30 15:15:54 修改

阅读量89

点赞数

分类专栏： VUE 文章标签： javascript vue.js 前端

于 2023-09-30 15:06:52 首次发布

本文链接：https://blog.csdn.net/vicerentao/article/details/133434258

版权

这篇博客详细介绍了在Vue3中实现父子组件之间的数据传递，包括父传子和子传父的方法，并提供了一个典型且可复用的双向传值代码示例，涉及到Father.vue和Child.vue两个组件的交互。

摘要由CSDN通过智能技术生成

父子组件传值(vue3)

父传子

父组件

一般是页面级组件：如Father.vue

<template>
	<div class="father">
    	<h1>我是父组件，名字叫{
  {fatherName}}</h1>
        <h3 id="valueForChild">我是待子组件传值的</h3>
        <!--
		1 此处使用子组件
			1.1 先在<script></script>中import组件
			1.2 直接使用import的名字引入子组件
		2 父组件给子组件传值
			2.1 先在父组件中声明变量，如fatherName
			2.2 然后在引用的子组件上绑定将要传到子组件的自定义名称变量，如:valueToChild
			2.3 这样父组件就将变量fatherName通过子组件的变量valueToChild传递到了子组件
			2.4 具体子组件如何使用，请见子组件里的介绍
		-->
        <Child :valueToChild="fatherName" />
    </div>
</template>

<script setup>
import Child from './Child.vue'
var fatherName='fatherName'
</script>