this.$refs怎么访问组件里的变量

在 Vue.js 中，如果你想访问组件里的变量，可以使用 `$refs` 来获取组件实例，然后通过实例的属性或方法来访问变量。

例如，假设你有一个组件 `MyComponent`，里面有一个名为 `myVar` 的变量，你可以在父组件中通过 `$refs` 来获取该组件的实例，然后访问该变量，示例代码如下：

<template>
  <div>
    <my-component ref="myComponentRef"></my-component>
    <button @click="onClick">访问变量</button>
  </div>
</template>

<script>
import MyComponent from './MyComponent.vue';

export default {
  components: {
    MyComponent,
  },
  methods: {
    onClick() {
      const myComponentInstance = this.$refs.myComponentRef;

      // 访问 myVar 变量
      console.log(myComponentInstance.myVar);
    },
  },
};
</script>

在上面的例子中，我们在父组件中使用 `<my-component>` 标签来引入 `MyComponent` 组件，并为其添加了一个 `ref` 属性，值为 `myComponentRef`。然后在父组件中点击按钮时，我们通过 `$refs` 来获取 `MyComponent` 的实例，然后访问其 `myVar` 变量并输出到控制台中。