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

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)
}