Vue3 글로벌 컴포넌트 통신 소스코드 분석 제공/삽입

1. 서문

이름에서 알 수 있듯이 할아버지-손자 구성 요소는 부모-자식 구성 요소 간의 통신보다 더 깊은 참조 관계를 갖습니다("세대 건너뛰기 구성 요소"라고도 함).

C 구성 요소는 B 구성 요소에 도입됩니다. B 컴포넌트는 A 컴포넌트 렌더링에 도입되는데, 이때 A는 C의 할아버지 수준입니다(더 계층적 관계가 있을 수 있음). props를 사용하면 레벨별로만 전달할 수 있으므로 너무 번거롭습니다. 좀 더 직접적인 의사소통 방법이 필요합니다.

그들 사이의 관계는 다음과 같습니다. Grandfather.vue 아래에 직접 마운트되지 않습니다. 그들 사이에는 Son.vue가 하나 이상 있습니다(여러 개가 있을 수 있음):

Grandfather.vue
└─Son.vue
  └─Grandson.vue

상사와의 관계 때문입니다. 하위 일관성, 할아버지-손자 구성 요소 통신 방식은 부모-자식 구성 요소 통신에도 적용 가능하며 할아버지-손자 관계를 아버지-아들 관계로 대체하면 됩니다.

2. 제공 / 주입

이 기능은 두 부분으로 구성됩니다. Grandfather.vue에는 데이터를 제공하는 제공 옵션이 있고 Grandson.vue에는 데이터 사용을 시작하는 주입 옵션이 있습니다.

• Grandfather.vue는 제공을 통해 Grandson.vue에 값을 전달합니다(정의된 함수 포함 가능)

• Grandson.vue는 Grandfather.vue에 주입을 통해 Grandfather 구성 요소의 이벤트 실행을 트리거합니다.

구성 요소 계층 구조의 깊이에 관계없이 제공을 시작하는 구성 요소는 모든 하위 구성 요소에 대한 종속성 공급자로 사용될 수 있습니다. 이 부분의 내용은 많이 변경되었지만 실제로는 사용하기가 매우 간단합니다. , 유사점도 있습니다:

• Parent 구성 요소는 어떤 하위 구성 요소가 제공하는 속성을 사용하는지 알 필요가 없습니다

• 하위 구성 요소는 주입 속성이 어디서 오는지 알 필요가 없습니다

또한 기억해야 할 한 가지는 제공 및 주입 바인딩이 응답하지 않는다는 것입니다. 이는 의도적인 것이지만 청취 가능한 객체가 전달되면 객체의 속성은 여전히 ​​반응합니다.

3. Initiate Provide

먼저 2.x의 사용법을 살펴보겠습니다:

export default {
  // 定义好数据
  data () {
    return {
      tags: [ '中餐', '粤菜', '烧腊' ]
    }
  },
  // provide出去
  provide () {
    return {
      tags: this.tags
    }
  }
}

이전 버전의 Provide 사용법은 데이터와 유사하며 객체를 반환하는 함수로 구성됩니다.

3.x의 새로운 버전의 Provide는 2.x와 사용법이 상당히 다릅니다.

3.x에서는 제공을 가져와서 설정에서 활성화해야 하며 이는 이제 완전히 새로운 방법입니다.

데이터를 제공하고 싶을 때마다 별도로 호출해야 합니다.
호출할 때마다 2개의 매개변수를 전달해야 합니다:

parametertypedescriptionkeystringname of datavalue 아무거나 데이터의 값provide를 만드는 방법을 살펴보겠습니다.

// 记得导入provide
import { defineComponent, provide } from 'vue'

export default defineComponent({
  // ...
  setup () {
    // 定义好数据
    const msg: string = 'Hello World!';

    // provide出去
    provide('msg', msg);
  }
})

작업은 매우 간단합니다. 하지만 응답성이 뛰어나도록 하려면 Provide가 응답하지 않는다는 점에 유의해야 합니다. 반응형 데이터를 전달해야 합니다

4. 주입 받기

먼저 2.x의 사용법을 살펴보겠습니다.

export default {
  inject: ['tags'],
  mounted () {
    console.log(this.tags);
  }
}

이전 버전의 inject 사용법은 새 버전 3의 사용법과 유사합니다. x inject 역시 2.x의 주입과 상당히 다릅니다.

3.x에서는 주입이 제공과 동일합니다. 먼저 가져온 다음 설정에서 활성화해야 합니다.

데이터를 삽입하고 싶을 때마다 별도로 호출해야 합니다.
호출할 때마다 1개의 매개변수만 전달하면 됩니다:

parametertypedescriptionkeystringprovide에 해당하는 데이터 이름

// 记得导入inject
import { defineComponent, inject } from 'vue'

export default defineComponent({
  // ...
  setup () {
    const msg: string = inject('msg') || '';
  }
})

也是很简单（写 TS 的话，由于 inject 到的值可能是 undefined，所以要么加个 undefined 类型，要么给变量设置一个空的默认值）。

5、响应性数据的传递与接收

之所以要单独拿出来说， 是因为变化真的很大

在前面我们已经知道，provide 和 inject 本身不可响应，但是并非完全不能够拿到响应的结果，只需要我们传入的数据具备响应性，它依然能够提供响应支持。

我们以 ref 和 reactive 为例，来看看应该怎么发起 provide 和接收 inject。

先在 Grandfather.vue 里 provide 数据：

export default defineComponent({
  // ...
  setup () {
    // provide一个ref
    const msg = ref<string>(&#39;Hello World!&#39;);
    provide(&#39;msg&#39;, msg);

    // provide一个reactive
    const userInfo: Member = reactive({
      id: 1,
      name: &#39;Petter&#39;
    });
    provide(&#39;userInfo&#39;, userInfo);

    // 2s 后更新数据
    setTimeout(() => {
      // 修改消息内容
      msg.value = &#39;Hi World!&#39;;

      // 修改用户名
      userInfo.name = &#39;Tom&#39;;
    }, 2000);
  }
})

在 Grandsun.vue 里 inject 拿到数据：

export default defineComponent({
  setup () {
    // 获取数据
    const msg = inject('msg');
    const userInfo = inject('userInfo');

    // 打印刚刚拿到的数据
    console.log(msg);
    console.log(userInfo);

    // 因为 2s 后数据会变，我们 3s 后再看下，可以争取拿到新的数据
    setTimeout(() => {
      console.log(msg);
      console.log(userInfo);
    }, 3000);

    // 响应式数据还可以直接给 template 使用，会实时更新
    return {
      msg,
      userInfo
    }
  }
})

非常简单，非常方便！！！

响应式的数据 provide 出去，在子孙组件拿到的也是响应式的，并且可以如同自身定义的响应式变量一样，直接 return 给 template 使用，一旦数据有变化，视图也会立即更新。

但上面这句话有效的前提是，不破坏数据的响应性，比如 ref 变量，你需要完整的传入，而不能只传入它的 value，对于 reactive 也是同理，不能直接解构去破坏原本的响应性。

切记！切记！！！

6、引用类型的传递与接收 (针对非响应性数据的处理)

provide 和 inject 并不是可响应的，这是官方的故意设计，但是由于引用类型的特殊性，在子孙组件拿到了数据之后，他们的属性还是可以正常的响应变化。

先在 Grandfather.vue 里 provide 数据：

export default defineComponent({
  // ...
  setup () {
    // provide 一个数组
    const tags: string[] = [ '中餐', '粤菜', '烧腊' ];
    provide('tags', tags);

    // provide 一个对象
    const userInfo: Member = {
      id: 1,
      name: 'Petter'
    };
    provide('userInfo', userInfo);

    // 2s 后更新数据
    setTimeout(() => {
      // 增加tags的长度
      tags.push('叉烧');

      // 修改userInfo的属性值
      userInfo.name = 'Tom';
    }, 2000);
  }
})

在 Grandsun.vue 里 inject 拿到数据：

export default defineComponent({
  setup () {
    // 获取数据
    const tags: string[] = inject('tags') || [];
    const userInfo: Member = inject('userInfo') || {
      id: 0,
      name: ''
    };

    // 打印刚刚拿到的数据
    console.log(tags);
    console.log(tags.length);
    console.log(userInfo);

    // 因为 2s 后数据会变，我们 3s 后再看下，能够看到已经是更新后的数据了
    setTimeout(() => {
      console.log(tags);
      console.log(tags.length);
      console.log(userInfo);
    }, 3000);
  }
})

export default defineComponent({
  setup () {
    // 获取数据
    const tags: string[] = inject('tags') || [];
    const userInfo: Member = inject('userInfo') || {
      id: 0,
      name: ''
    };

    // 打印刚刚拿到的数据
    console.log(tags);
    console.log(tags.length);
    console.log(userInfo);

    // 因为 2s 后数据会变，我们 3s 后再看下，能够看到已经是更新后的数据了
    setTimeout(() => {
      console.log(tags);
      console.log(tags.length);
      console.log(userInfo);
    }, 3000);
  }
})

引用类型的数据，拿到后可以直接用，属性的值更新后，子孙组件也会被更新。
但是！！！由于不具备真正的响应性，return 给模板使用依然不会更新视图，如果涉及到视图的数据，请依然使用 响应式 API 。

7、基本类型的传递与接收 (针对非响应性数据的处理)

基本数据类型被直接 provide 出去后，再怎么修改，都无法更新下去，子孙组件拿到的永远是第一次的那个值。

先在 Grandfather.vue 里 provide 数据：

export default defineComponent({
  // ...
  setup () {
    // provide 一个数组的长度
    const tags: string[] = [ '中餐', '粤菜', '烧腊' ];
    provide('tagsCount', tags.length);

    // provide 一个字符串
    let name: string = 'Petter';
    provide('name', name);

    // 2s 后更新数据
    setTimeout(() => {
      // tagsCount 在 Grandson 那边依然是 3
      tags.push('叉烧');

      // name 在 Grandson 那边依然是 Petter
      name = 'Tom';
    }, 2000);
  }
})

在 Grandsun.vue 里 inject 拿到数据：

export default defineComponent({
  setup () {
    // 获取数据
    const name: string = inject('name') || '';
    const tagsCount: number = inject('tagsCount') || 0;

    // 打印刚刚拿到的数据
    console.log(name);
    console.log(tagsCount);

    // 因为 2s 后数据会变，我们 3s 后再看下
    setTimeout(() => {
      // 依然是 Petter
      console.log(name);

      // 依然是 3
      console.log(tagsCount);
    }, 3000);
  }
})

很失望，并没有变化。

那么是否一定要定义成响应式数据或者引用类型数据呢？

当然不是，我们在 provide 的时候，也可以稍作修改，让它能够同步更新下去。

先在 Grandfather.vue 里 provide 数据：

export default defineComponent({
  // ...
  setup () {
    // provide 一个数组的长度
    const tags: string[] = [ '中餐', '粤菜', '烧腊' ];
    provide('tagsCount', (): number => {
      return tags.length;
    });

    // provide 字符串
    let name: string = 'Petter';
    provide('name', (): string => {
      return name;
    });

    // 2s 后更新数据
    setTimeout(() => {
      // tagsCount 现在可以正常拿到 4 了
      tags.push('叉烧');

      // name 现在可以正常拿到 Tom 了
      name = 'Tom';
    }, 2000);
  }
})

再来 Grandsun.vue 里修改一下 inject 的方式，看看这次拿到的数据：

export default defineComponent({
  setup () {
    // 获取数据
    const tagsCount: any = inject('tagsCount');
    const name: any = inject('name');

    // 打印刚刚拿到的数据
    console.log(tagsCount());
    console.log(name());

    // 因为 2s 后数据会变，我们 3s 后再看下
    setTimeout(() => {
      // 现在可以正确得到 4
      console.log(tagsCount());

      // 现在可以正确得到 Tom
      console.log(name());
    }, 3000);
  }
})

这次可以正确拿到数据了，看出这2次的写法有什么区别了吗？

基本数据类型，需要 provide 一个函数，将其 return 出去给子孙组件用，这样子孙组件每次拿到的数据才会是新的。
但由于不具备响应性，所以子孙组件每次都需要重新通过执行 inject 得到的函数才能拿到最新的数据。

按我个人习惯来说，使用起来挺别扭的，能不用就不用……

由于不具备真正的响应性，return 给模板使用依然不会更新视图，如果涉及到视图的数据，请依然使用 响应式 API 。

위 내용은 Vue3 글로벌 컴포넌트 통신 소스코드 분석 제공/삽입의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!