vue3组件通信（父给子传参，子调用父的方法，父调用子的方法，顶层组件给底层组件传参，底层组件调用顶层组件的方法）

已于 2023-12-30 10:50:11 修改
阅读量1.4k 收藏 11
点赞数 10
文章标签： vue.js 前端 javascript
于 2023-12-21 20:29:32 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_72167535/article/details/135139057
版权

目录

1.父传子（父给子传参）

2.子传父（子调用父的方法）

3.父调用子的方法

4.顶层给底层传参，底层调用顶层的方法

5.模板引用

1.父传子（父给子传参）

①.步骤

父组件中给子组件通过绑定属性的方式传递往子组件的参数

子组件内部通过props选项进行接收

②.示例

父组件：

<script setup>
// 局部组件，导入之后就可以进行使用
import chlid from '@/components/child.vue'
import { ref } from 'vue';
const money = ref(50);
const add = () =>{
  money.value += 10;
}
</script>

<template>
  <div>
    <h3>父组件 {{ money }}
      <!-- 在父组件中改变了往子组件传递的值，子组件会接收到最新的值，并更新视图 -->
    <button @click="add"> 挣钱</button>
  </h3>
  <!-- 给子组件，以添加属性的方式进行传递，可以传递固定值或者动态值-->
    <chlid car = "BYD" :money = "money"></chlid>
  </div>
</template>

子组件：

<template>
<!-- 在模板中可以直接使用参数,不需要通过prop.的方式 -->
<div class="son"> 子组件  {{ car }} - {{ money }} 
<button>花钱</button>
</div>
</template>

<script setup>
const prop = defineProps({
    money:Number,
    car:String
})
const emit = defineEmits(['sub'])
// 在js中需要prop.的方式来使用参数
console.log(prop.car)

</script>
<style scoped>
.son {
    border:1px solid #000;
    padding: 30px;
}
</style>

③.说明

在父组件中，导入子组件可以直接进行使用。

在父组件中，需要在子组件上以属性的方式进行参数传递，可以传递固定值或者动态值。

在父组件中，改变了给子组件传递的值，子组件会实时接收到最新的值，并更新视图。

在子组件中，通过defineProps来接收父组件传递的参数，参数id和父组件中子组件上的属性一致。

在子组件中，模板中可以直接使用参数，在js中要通过对象.属性的方式进行使用。

当父组件给子组件传递的参数变化时，如果传递的是个响应式对象，给响应式对象设定一个对象时，子组件没有接收到父组件最新的值，但是给对象中的属性一一赋值的，子组件是可以接收到父组件中最新的值（具体原因正在调查中）。

2.子传父（子调用父的方法）

①步骤

在父组件中给子组件标签通过@方式绑定自定义事件

在子组件通过defineEmits编译器宏生成emit方法

在子组件中触发自定义事件，并传递参数

②示例

父组件：

<script setup>
// 局部组件，导入之后就可以进行使用
import chlid from '@/components/child.vue'
import { ref } from 'vue';
const money = ref(50);
const add = () =>{
  money.value += 10;
}

const subs = (val) =>{
money.value = val;
}
</script>

<template>
  <div>
    <h3>父组件 {{ money }}
      <!-- 在父组件中改变了往子组件传递的值，子组件会接收到最新的值，并更新视图 -->
    <button @click="add"> 挣钱</button>
  </h3>
  <!-- 给子组件，以添加属性的方式进行传递，可以传递固定值或者动态值-->
    <chlid car = "BYD" :money = "money" @sub="subs"></chlid>
  </div>
</template>

子组件：

<template>
<!-- 在模板中可以直接使用参数,不需要通过prop.的方式 -->
<div class="son"> 子组件  {{ car }} - {{ money }} 
<button @click="send">花钱</button>
</div>
</template>

<script setup>
const prop = defineProps({
    money:Number,
    car:String
})
const emit = defineEmits(['sub'])
// 在js中需要prop.的方式来使用参数
console.log(prop.car)

const send = () =>{
    emit("sub",5);
}

</script>
<style scoped>
.son {
    border:1px solid #000;
    padding: 30px;
}
</style>

③说明

父组件中的自定义事件名和子组件中defineEmits数组中的时间名和emit方法中的事件名，这三个事件名必须保持一致。

3.父调用子的方法

①步骤

默认情况下载<script setup>语法糖下组件内部的属性和方法时不开放给父组件访问的，

可以通过defineExpose编译宏指定哪些属性和方法允许访问。

②示例

父组件：

<script setup>
// 局部组件，导入之后就可以进行使用
import chlid from '@/components/child.vue'
import { ref } from 'vue';
const name = ref('xiaolin');
const updateName = () => {
  name.value = 'xiaoli';
}
const money = ref(50);
const add = () =>{
  money.value += 10;
}

const subs = (val) =>{
money.value = val;
}

// 定义子组件ref对象，调用子组件的方法及属性
const childRef = ref(null);
const gerChild = () =>{
  console.log(childRef.value);
  console.log(childRef.value.info);
  childRef.value.fun1('123');
}
</script>

<template>
  <div>
    <h3>父组件 {{ money }}
      <!-- 在父组件中改变了往子组件传递的值，子组件会接收到最新的值，并更新视图 -->
    <button @click="add"> 挣钱</button>
  </h3>
  <!-- 给子组件，以添加属性的方式进行传递，可以传递固定值或者动态值-->
    <chlid ref="childRef" car = "BYD" :money = "money" @sub="subs"></chlid>
    <button @click="gerChild">获取子组件</button>
  </div>
</template>

子组件：

<template>
<!-- 在模板中可以直接使用参数,不需要通过prop.的方式 -->
<div class="son"> 子组件  {{ car }} - {{ money }} 
<button @click="send">花钱</button>
<input ref="inputRef"/>
</div>
</template>

<script setup>
import { ref,onMounted } from 'vue';
const prop = defineProps({
    money:Number,
    car:String
})
const emit = defineEmits(['sub'])
// 在js中需要prop.的方式来使用参数
console.log(prop.car)

const send = () =>{
    emit("sub",5);
}
// 模板引用
// 1.通过调用ref函数生成一个ref对象
// 2.通过ref标识进行绑定
// 通过ref对象的.value属性就能获取到绑定元素或组件的方法及属性（必须渲染完成之后才能获取）
const inputRef = ref(null);
onMounted(()=>{
    console.log(inputRef.value);
    inputRef.value.focus();
})

// 下面的属性和方法要想被父组件访问，需要defineExpose宏函数指定要访问的属性和方法
const  info = 1234556;
const fun1 = (val) =>{
    console.log("调用到了子组件的方法",val);
}
defineExpose({
    info,fun1
})
</script>
<style scoped>
.son {
    border:1px solid #000;
    padding: 30px;
}
</style>

③说明

通过defineExpose显示暴露子组件内部的属性和方法。

在父组件中通过ref函数获取到子组件的实例，然后通过.value来调用子组件的属性及方法。

4.顶层给底层传参，底层调用顶层的方法

①步骤

顶层组件通过provide函数提供数据

底层组件通过inject函数获取数据

传递参数，一般传递响应式变量

传递方法，方法中可以接收参数 

②示例

顶层组件

<script setup>
// 局部组件，导入之后就可以进行使用
import chlid from '@/components/child.vue'
import { provide, ref } from 'vue';
const name = ref('xiaolin');
const updateName = () => {
  name.value = 'xiaoli';
}
const money = ref(50);
const add = () =>{
  money.value += 10;
}

const subs = (val) =>{
money.value = val;
}

// 定义子组件ref对象，调用子组件的方法及属性
const childRef = ref(null);
const gerChild = () =>{
  console.log(childRef.value);
  console.log(childRef.value.info);
  childRef.value.fun1('123');
}
// 顶层组件给底层组件传递参数
// 在顶层组件通过provie向底层组件传递参数,数据是响应式的，在顶层组件中修改了传递给底层组件的参数，底层组件会接收到最新的值。
const title= ref("主题1");
provide("title",title);
const updateBottom = () =>{
  title.value = "主题修改了";
}
// 顶层组件给底层组件传递方法
provide('updateTitile', (newVal) =>{
  title.value = '主题修改为' + newVal;
})
</script>

<template>
  <div>
    <h1>父组件 {{ money }}
      <!-- 在父组件中改变了往子组件传递的值，子组件会接收到最新的值，并更新视图 -->
    <button @click="add"> 挣钱</button>
  </h1>
  <!-- 给子组件，以添加属性的方式进行传递，可以传递固定值或者动态值-->
    <chlid ref="childRef" car = "BYD" :money = "money" @sub="subs"></chlid>
    <button @click="gerChild">获取子组件</button>
    <!-- 修改向底层组件传递的内容 -->
    <button @click="updateBottom"> 修改向底层组件传递的内容</button>
  </div>
</template>

中间组件

<template>
<!-- 在模板中可以直接使用参数,不需要通过prop.的方式 -->
<div class="son">
     <h2>子组件  {{ car }} - {{ money }} </h2>
<button @click="send">花钱</button>
<input ref="inputRef"/>
<bottom></bottom>
</div>

</template>

<script setup>
import { ref,onMounted } from 'vue';
import bottom from './bottom.vue';
const prop = defineProps({
    money:Number,
    car:String
})
const emit = defineEmits(['sub'])
// 在js中需要prop.的方式来使用参数
console.log(prop.car)

const send = () =>{
    emit("sub",5);
}
// 模板引用
// 1.通过调用ref函数生成一个ref对象
// 2.通过ref标识进行绑定
// 通过ref对象的.value属性就能获取到绑定元素或组件的方法及属性（必须渲染完成之后才能获取）
const inputRef = ref(null);
onMounted(()=>{
    console.log(inputRef.value);
    inputRef.value.focus();
})

// 下面的属性和方法要想被父组件访问，需要defineExpose宏函数指定要访问的属性和方法
const  info = 1234556;
const fun1 = (val) =>{
    console.log("调用到了子组件的方法",val);
}
defineExpose({
    info,fun1
})
</script>
<style scoped>
.son {
    border:1px solid #000;
    padding: 30px;
}
</style>

底层组件

<template>
<div> 
    <h3>我是底层组件 - {{ title }}</h3>
    <button @click="update">调用顶层组件的方法</button>
</div>
</template>

<script setup>
import { inject } from 'vue';

// 底层组件通过inject接收顶层组件的参数
const title = inject('title');

// 底层组件通过inject接收顶层组件的方法
const updateTitile = inject('updateTitile');

const update = () =>{
    updateTitile('底层调用顶层');
}

</script>

③说明

通过provide及inject实现顶层组件向任意的底层组件传递数据和方法，实现跨层组件通信。如果不使用这种方式，只能一级级组件进行通信，或者使用全局状态管理（如pinia）。

在顶层组件中通过provide提供响应式变量及方法，在底层组件中铜鼓inject可以进行调用。

5.模板引用

①步骤

调用ref函数生成一个ref对象。

通过ref标识绑定ref对象到标签中。

②示例

<template>
<!-- 在模板中可以直接使用参数,不需要通过prop.的方式 -->
<div class="son"> 子组件  {{ car }} - {{ money }} 
<button @click="send">花钱</button>
<input ref="inputRef"/>
</div>
</template>

<script setup>
import { ref,onMounted } from 'vue';
const prop = defineProps({
    money:Number,
    car:String
})
const emit = defineEmits(['sub'])
// 在js中需要prop.的方式来使用参数
console.log(prop.car)

const send = () =>{
    emit("sub",5);
}
// 模板引用
// 1.通过调用ref函数生成一个ref对象
// 2.通过ref标识进行绑定
// 通过ref对象的.value属性就能获取到绑定元素或组件的方法及属性（必须渲染完成之后才能获取）
const inputRef = ref(null);
onMounted(()=>{
    console.log(inputRef.value);
    inputRef.value.focus();
})

const  info = 1234556;
const fun1 = () =>{
    console.log("调用到了子组件的方法");
}
</script>
<style scoped>
.son {
    border:1px solid #000;
    padding: 30px;
}
</style>

上面示例实现了画面加载后焦点放在输入框上。 

③说明

通过ref标识获取真实的dom对象或者组件对象实例，这就就通过dom对象或者组件实例来调用方法和属性。常见的示例如下：

获取form表单的dom对象，调用validate()进行校验处理。

获取imput输入框的dom对象，调用focus()，将焦点放在输入框上。

获取子组件的对象实例，调用子组件的方法或者获取子组件的属性。

注意：通过ref方式获取dom对象有一个前提，必须是页面渲染完成之后才能获取到，最早在onmounted中可以获取到。

linab112
关注
  • 10
    点赞
  • 踩
  • 11
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
Vue3里通过defineExpose编译宏可以指定允许父组件访问子组件哪些属性和方法，通过provide和inject 顶层组件向任意的底层组件传递数据和方法，实现跨层组件通信
qq_37635012的博客
05-07 502
备注：顶层组件给底层组件提供的是数据时，底层组件只是渲染值；如果底层组件想要改传递的该值，需要顶层组件重新提供更改改数据的方法，底层组件获取到该方法后调用就能更改顶层组件传的值了。默认情况下在< script setup >语法糖下组件内部的属性和方法是不开放给父组件访问的，可以通过defineExpose编译宏指定哪些属性和方法允许访问。通过 ref标识 获取真实的 dom对象或者组件实例对象。传递方法：点击按钮，数字修改表示顶层组件的值已经修改。:底层组件通过inject函数获取数据。
Vue3父子组件间传参通信
热门推荐
qq_45397526的博客
08-11 3万+
本文主要是记录Vue3在setup语法糖下的父子组件间传参的四种方式。
Vue高级3-Vue脚手架，父组件向子组件传数据（props）
weixin_43010586的博客
02-28 1386
main.js文件中 可以写为 render是新版本的脚手架简写，render是一个函数负责往DOM上面去渲染的，完整的是render:function(h){return h(App)}，其中这个h默认为形参，默认传的是一个createElement方法，而createElement是创建标签的意思，就是创建一个App标签，也就是render:function(createElement){...
vue3子组件调用父组件的方法
最新发布
m0_57005111的博客
07-25 192
vue3子组件调用父组件方法
Vue3组件传参之父子组件传参
wxid_mtnujb6ipc0322的博客
10-10 5102
在Vue3中，父子组件之间的通信是一项常见的任务。本文将介绍一些在Vue3中实现父子组件之间传值的方法。
vue3 父传子 子传父
weixin_48290402的博客
09-14 339
vue3 子组件想使用父组件的方法
vue3中的父传子，子传父
2301_79507619的博客
02-29 487
在Vue 3中，父组件向子组件传递数据和子组件向父组件通信的方式与Vue 2非常相似，但Vue 3提供了Composition API和更多的响应式API，为组件间的通信提供了更多的可能性。父组件在子组件的标签上使用`@事件名="处理函数"`来监听这个事件。- **父传子**：通过`props`传递数据。父组件在使用子组件的标签时，通过`:属性名="数据"`的形式传递数据给子组件，子组件通过`defineProps`接收数据。子组件使用`emit`触发事件，父组件监听这个事件。### 子组件向父组件通信。
vue3父传子，子传父
weixin_58347102的博客
12-02 484
<template> <div> <p>我是父组件</p> <p>111111111111111</p> <headrt :info="context" @clickSon="clickFu"></headrt> {{value}} </div> </template> <script lang='ts'> import { d...
Vue2组件传参大总结
c__yang的博客
12-27 989
简单来说,Vuex在大型项目中做数据统一管理的,在vuex中存储的数据,每一个组件都可以引用,vuex中的数据发生变化,引用该数据的组件会自动更新。最常见的父子组件通信方式,props支持参数验证,emit只会触发父组件的监听事件,不适合多层次组件参数传递,需要逐层传递参数。这是最基础的组件通信方式,父组件通过props可以向子组件进行通信,子组件通过emit向父组件通信。就是单纯的父组件给子组件传递参数,和子组件单纯的给父组件传递参数。4. 复杂组件不建议使用此方式传参,任意层级都能访问数据追踪困难。
Vue2组件传参
kaixinde_9的博客
10-20 917
props/emit 传参是最基础的组件通信方式，父组件通过props 可以向子组件进行通信，子组件通过emit 向父组件进行通信。最常见的父子组件通信方式props支持参数验证emit 只会触发父组件的监听事件不适合多层次组件参数传递，需要逐层传递参数常用于多层嵌套组件场景下兄弟组件或任意两个组件之间通讯。$on 事件 是不会自动清除销毁的，需要手动销毁，可以在beforeDestroy中解绑监听，避免重复触发。适合简单场景下使用，太过复杂的场景建议使用 vuex。
vue组件间通信的13种方式
longfan_的博客
06-16 1万+
vue组件间通信的13种方式
初始vue(组件的定义及传参，Axios数据请求及渲染，vue路由）
wjnjava的博客
07-19 327
会介绍一下内容： 组件的定义及传参，Axios数据请求及渲染， 1.组件的定义 在编写页面过程中，轮播图可能是个重复使用的页面，这个时候就需要用到组件，把重复的页面封装成公共组件。复用性比较好 如何封装成公共组件 例如：在components目录下新建一个Banner.vue 在Banner.vue中定义轮播的相关页面以及对应的方法。 在页面中如何使用Banner.vue组件。 首先引入banner。在components中引入自定义组件 components: { Banner} .
Vue3中父组件调用子组件的方法
weixin_62360776的博客
07-02 1万+
el-button type="primary" @click="handleOpenUserDialog">请选择用户在父组件中使用子组件 注意要使用ref: userDialogRef。这个名字就可以调用到组件中通过defineExpose暴露的方法。（1）导入上面定义的页面组件。（3）给组件取个ref名字。
vue3父子组件间传参通信
XMCYD的博客
06-14 1万+
本文主要是记录Vue3在setup语法糖下的父子组件间通信的四种方式。
vue3父组件调用子组件方法
Wang_HaHa_的博客
07-10 4303
vue3父组件调用子组件方法
Vue3学习--父传子&子传父
m0_47002684的博客
05-30 344
【代码】Vue3学习--父传子&子传父。
VUE3 父组件中调用子组件方法
weixin_53363875的博客
01-20 1万+
VUE3 父组件中调用子组件方法
vue3父子组件相互调用方法详解
共同学习，共同成长
05-11 6283
在vue3项目开发中，我们常常会遇到父子组件相互调用的场景，下面主要以setup语法糖格式详细聊聊父子组件那些事儿
vue3父组件给子组件传参
10-13
在 Vue3 中，父组件给子组件传参可以通过 props 进行实现。具体步骤如下： 1. 在子组件中定义 props，可以是一个对象或者数组，例如： ``` // 子组件 <template> <div>{{ message }}</div> </template> <script> export default { props: { message: String } } </script> ``` 2. 在父组件中使用子组件时，通过 v-bind 指令将数据传递给子组件的 props，例如： ``` // 父组件 <template> <div> <child-component :message="parentMessage"></child-component> </div> </template> <script> import ChildComponent from './ChildComponent.vue' export default { components: { ChildComponent }, data() { return { parentMessage: 'Hello from parent' } } } </script> ``` 在上面的例子中，父组件通过 v-bind 指令将 parentMessage 数据传递给了子组件的 message props。
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值