vue3 祖孙组件传值及父子双向绑定

最新推荐文章于 2025-04-20 11:23:01 发布

原创最新推荐文章于 2025-04-20 11:23:01 发布 · 1.6k 阅读

6 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #vue.js #前端

本文介绍了Vue中组件间的通信方式，包括祖孙组件使用provide/inject进行值传递，父子组件通过props和v-model实现双向绑定，以及子组件调用父组件方法和父组件向子组件传递数据的实例。详细阐述了各种通信方法的使用场景和步骤。

1.祖孙组件传值（provide、inject ）

祖组件

import { ref, provide} from "vue";

const navName = ref('瞌睡的博客主页') //导航标签名称
const sendGrandson = function (value) { //执行孙子件方法赋值
  navName.value = value //接收
}
provide('sendHandle', sendGrandson)//执行孙子件方法赋值

孙组件

import { ref,inject } from 'vue';
const sendGrandson = inject('sendHandle'); //注入祖件方法

const getNavName = function (params) {
  sendGrandson(params) //执行祖件方法
}

2.父子组件双向绑定

子组件

import { ref,reactive, watch,defineEmits} from 'vue';
let str = ref()
const emit = defineEmits(['update:getValue'])
emit('update:getValue',str.value);

父组件

<NavLabel v-model:getValue="getValue"></NavLabel>

const getValue = ref()
watch(getValue,(val)=>{
  console.log(getValue.value,'获取到的值');
})

在这里插入图片描述

3.父子组件传值

父组件

 <NavLabel  :foo="getValue"></NavLabel>

const getValue = ref('321')

子组件

const props = defineProps(['foo'])
console.log(props.foo)

4.子组件执行父组件方法

父组件

 <NavLabel  @getValue="getValue"></NavLabel>

const getValue = function(data){
console.log(data,'子组件执行父组件方法');
}

子组件

import {  defineProps,defineEmits ,inject } from 'vue';
const emit = defineEmits(['getValue'])
const getNavName = function (params) {//子组件页面点击的方法
  emit('getValue',321)
}