vue3 ts通过页面标签 ref a页面往b页面传值

如果您想通过页面标签的 `ref` 属性来实现在 a 页面往 b 页面传值的话，可以使用 `inject` 和 `provide` 这两个 API。

具体实现步骤如下：

1. 在 a 页面中定义一个变量，用来存储要传递的值。然后将该变量通过 `provide` 方法提供出去。

import { defineComponent, ref, provide } from 'vue';

export default defineComponent({
  setup() {
    const value = ref('hello world');
    provide('value', value);
    return {};
  },
});

2. 在 b 页面中，使用 `inject` 方法来获取 a 页面传递过来的值。先在 `setup` 方法中使用 `ref` 定义一个变量，然后使用 `inject` 方法获取 a 页面传递过来的值，并将其赋值给该变量。

import { defineComponent, ref, inject } from 'vue';

export default defineComponent({
  setup() {
    const value = ref('');
    const valueFromA = inject('value', '');
    value.value = valueFromA;
    return { value };
  },
});

3. 在 a 页面中使用 `ref` 属性引用该标签，并将该标签的值传递给 b 页面。

<template>
  <div ref="myDiv" @click="handleClick">点击我跳转到 B 页面</div>
</template>

<script>
import { defineComponent, ref } from 'vue';
import { useRouter } from 'vue-router';

export default defineComponent({
  setup() {
    const router = useRouter();
    const myDiv = ref(null);
    const handleClick = () => {
      router.push({ path: '/b', query: { value: myDiv.value.innerText } });
    };
    return { myDiv, handleClick };
  },
});
</script>

这样就完成了通过页面标签的 `ref` 属性实现在 a 页面往 b 页面传值的操作。需要注意的是，使用这种方式传递的值只适合传递简单的字符串或数字等数据。如果需要传递复杂的对象，可以使用 `JSON.stringify()` 方法将对象转换成字符串进行传递，然后在 b 页面中使用 `JSON.parse()` 方法将字符串转换成对象。