组件间传值--祖孙

祖孙间传值，爷传孙

使用注入依赖provide（）与inject（）

provide提供一个值，可以被后代组件注入。provide（）接受两个参数，第一个参数是要注入的key，可以是一个字符串或者一个symbol，第二个参数是要注入的值。

inject（）注入一个由祖先组件或者整个应用（通过app.provide()）提供的值。第一个参数是注入的key。Vue会遍历父组件链，通过匹配key来确定所提供的值。如果父组件链上多个组件对同一个key提供了值，那么离得更近的组件将会“覆盖”链上更远的组件所提供的值。如果没有能通过key匹配到值，inject（）将会返回undefined，除非提供了一个默认值。第二个参数是可选的，即在没有匹配到key时使用的默认值。

例如孙子元素需要获取祖先元素的某一ref

Grandpa爷爷组件

<template>

...

<div ref="testContainer"></div>

<Father @search-content="searchText"></Father>

...

</template>

<script setup>

const testContainer= ref(null)

provide('testContainer',testContainer)

</script>

Father父亲组件组件

<template>

...

<GrandSon></GrandSon>

...

</template>

GrandSon孙子组件

<template>

...

...

</template>

<script setup>

const scrollContainer = inject('testContainer')

</script>

祖孙之间传值，孙传爷

1.使用$attrs与 $emit

$attrs是一个包含了组件所有穿透attribute的对象，其中穿透attribute是指由父组件传入，且没有被子组件声明为props或是组件自定义事件的attribute和事件处理函数

$emit可以在当前组件触发一个自定义事件。任何额外的参数都会传递给事件监听器的回调函数。

以下代码为在<script setup>中的示例代码

GrandSon孙子组件

<template>

...

  <el-input

    @keyup.enter="searchFun"

    v-model="searchText"

    clearable

  >

...

</template>

<script setup>

const emits = defineEmits(['searchContent'])

const searchFun= () => {

  emits('searchContent',searchText.value)

}

</script>

Father父亲组件组件

<template>

...

<GrandSon v-bind="$attrs"></GrandSon>

...

</template>

Grandpa爷爷组件

<template>

...

<Father @search-content="searchText"></Father>

...

</template>

<script setup>

function searchText(valueText) {

...

}

</script>

2.使用emit一级一级传递,上述孙子与爷爷组件不动，父亲组件改为

Father父亲组件组件

<template>

...

<GrandSon @search-content="(value) => {emits('searchContent', value)}"></GrandSon>

...

</template>

<script setup>

const emits = defineEmits(['searchContent'])

</script>

3.查阅网上可用 v-bind="$attrs"与v- on="$listeners",但是Vue3已移除了 $listeners，暂未查到可行的用法