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

这篇博客详细介绍了在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>
子组件

一般是被调用的组件

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值