vue3实现父组件和子组件的数据交互

# 1、props和emit 或者 v-model双向绑定

在 Vue 3 中，我们可以使用 v-model 的自定义参数来绑定多个属性。默认情况下，v-model 绑定到 modelValue 属性名称并监听 update:modelValue 事件。也可以通过自定义参数，可以让 v-model 绑定到不同的属性名称并监听相应的事件。（ 3.4 版本之前写法）
父组件：parent.vue

<template>
  <ChildComponent v-model:title="title" v-model:content="content" />
</template>

<script setup>
import { defineComponent, ref } from 'vue';
import ChildComponent from './ChildComponent.vue';

const title = ref('这是标题');
const content = ref('这是内容');
</script>

子组件：child.vue（3.4版本之前写法）

<template>
  <div>
    <input v-model="title" />
    <textarea v-model="content" ></textarea>
  </div>
</template>

<script setup>
import { defineProps, defineEmits } from 'vue';

const props = defineProps({
  title: {
    type: String,
    required: true
  },
  content: {
    type: String,
    required: true
  }
});

const emit = defineEmits(['update:title', 'update:content']);

function updateTitle(value) {
  emit('update:title', value);
}

function updateContent(value) {
  emit('update:content', value);
}

const title = computed({
  get: () => props.title,
  set: updateTitle
});

const content = computed({
  get: () => props.content,
  set: updateContent
});
</script>

当title和content改变时就会触发computed计算属性去改变父组件的值，
当然，我们也可以手动emit('update:名称'，值)去改变。

从 Vue 3.4 开始，推荐的实现方式是使用 defineModel()
子组件：child.vue（3.4版本之后写法）

<template>
  <div>
    <input v-model="title"  />
    <textarea v-model="content"></textarea>
  </div>
</template>

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

// 使用 defineModel 来定义模型
const title = defineModel('title', { required: true });
const content = defineModel('content', { required: true });

//直接赋值酒就会自动触发相应的更新逻辑
title.value = '这是新标题';
content.value = '这是新内容';

</script>

# 2、provide 和 inject

provide 和 inject 可以在祖先组件和后代组件之间共享数据，适用于更深层次的组件嵌套。
祖先组件vue

<template>
  <ChildComponent />
</template>

<script setup>
import { provide , ref } from 'vue';

const data = ref('这是一个内容');

// 使用 provide 提供数据
provide('sharedData', data );
</script>

后代组件vue

<template>
  <div>{{ data}}</div>
</template>

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

// 使用 inject 接收数据
const data= inject('sharedData');

//修改内容也会直接更新到祖先组件
data.value = '这是新内容'
</script>