vue3组件通信多种方法使用

声明：所有示例都是使用vue3中的组合式API + <script setup>来构建，不存在TS代码。

父传子	props
	v-model
	$refs
	具名插槽，默认插槽

子传父	props
	v-model
	$parent
	自定义事件
	作用域插槽

祖传孙、孙传祖	$attrs
	provide、inject

任意组件传递	mitt(插件)
	pinia

Props方式

props是父组件向子组件传递数据 并且是进行组件链逐级传递，可以使用 defineProps() 宏来声明，props可以传递任何数据类型

// 父组件
<script setup>
import { ref, reactive,onMounted,provide} from 'vue'
const name = ref("张三");
const age = ref(25);
const props = defineProps(['name'])
</script>
//子标签
<child name='name'></child>

// 
<script setup>
//注：defineProps() 宏声明 不需要导包
const pro = defineProps(['name','age'])
</script>
<template>
	<p>我是子组件</p>
	<div>{{ pro.name }}</div>
	<div>{{ pro.age }}</div>
</template>

静态 vs. 动态 Prop

使用 v-bind 或缩写 : 来进行动态绑定的 props

//静态传入
<child name='name'></child>

//动态传入
<child :name='name'></child>

//复杂动态传入(表达式值)
<child :title="name.title + ' by ' + name.age" /></child>

依赖注入Project/Inject方式

Project/Inject方法是解决Prop 组件链逐级传递的问题

1.provide()

provide() 接受两个参数：第一个参数是要注入的 key，可以是一个字符串或者一个 symbol，第二个参数是要注入的值。

<script setup>
import { ref, provide } from 'vue'
import { fooSymbol } from './injectionSymbols'

// 提供静态值
provide('foo', 'bar')

// 提供响应式的值
const count = ref(0)
provide('count', count)

// 提供时将 Symbol 作为 key
provide(fooSymbol, count)
</script>

2.inject()

注入一个由祖先组件或整个应用 (通过 app.provide()) 提供的值。

第一个参数是注入的 key（这个key就是用来和provide设定的第一个参数进行匹配）。Vue 会遍历父组件链，通过匹配 key 来确定所提供的值。如果父组件链上多个组件对同一个 key 提供了值，那么离得更近的组件将会“覆盖”链上更远的组件所提供的值。如果没有能通过 key 匹配到值，inject() 将返回 undefined，除非提供了一个默认值。

第二个参数是可选的，即在没有匹配到 key 时使用的默认值。

第二个参数也可以是一个工厂函数，用来返回某些创建起来比较复杂的值。在这种情况下，你必须将 true 作为第三个参数传入，表明这个函数将作为工厂函数使用，而非值本身。

<script setup>
import { inject } from 'vue'
import { fooSymbol } from './injectionSymbols'

// 注入不含默认值的静态值
const foo = inject('foo')

// 注入响应式的值
const count = inject('count')

// 通过 Symbol 类型的 key 注入
const foo2 = inject(fooSymbol)

// 注入一个值，若为空则使用提供的默认值
const bar = inject('foo', 'default value')

// 注入一个值，若为空则使用提供的函数类型的默认值
const fn = inject('function', () => {})

// 注入一个值，若为空则使用提供的工厂函数
const baz = inject('factory', () => new ExpensiveObject(), true)
</script>

使用 Symbol 作注入名以避免潜在的冲突（目前构建的应用暂时用不到，不做讲解）

emit方式

emit方式是用于子传父；
1、组件可以显式地通过 defineEmits() 宏来声明它要触发的事件
2、defineEmits() 宏不能在子函数中使用。如上所示，它必须直接放置在 <script setup> 的顶级作用域下

// 子组件
<template>
  <div class="child-wrap input-group">
    <input
      v-model="value"
      type="text"
      class="form-control"
      placeholder="请输入"
    />
    <div class="input-group-append">
      <button @click="handleSubmit" class="btn btn-primary" type="button">
        添加
      </button>
    </div>
  </div>
</template>
<script setup>
import { ref, defineEmits } from 'vue'
const addr = ref('')
const emits = defineEmits(['add'])
const handleSubmit = () => {
  emits('add', addr.value)
  addr.value = ''
}
</script>

// 父组件
<template>
  <ul class="parent list-group">
    <li class="list-group-item" v-for="i in list" :key="i">{{ i }}</li>
  </ul>
  <!-- 子组件 -->
  <child-components @add="handleAdd"></child-components>
</template>
<script setup>
import { ref } from 'vue'
import ChildComponents from './child.vue'
const list = ref(['JavaScript', 'HTML', 'CSS'])
// add 触发后的事件处理函数
const handleAdd = value => {
  list.value.push(value)
}
</script>
 
复制代码