轻松玩转Vue中的ref，解锁组件数据与方法操作

2024-01-15 11:15:24

Vue中的ref：操控组件数据与方法的利器

在Vue.js中，ref是一个非常有用的指令，它允许我们访问组件实例，从而操作组件的DOM元素、数据和方法。这意味着，即使组件被嵌套在其他组件中，我们仍然可以轻松地与之交互。

1. 基本用法：获取DOM元素节点

ref最基本的使用方法就是获取DOM元素节点。这可以通过在HTML元素上添加ref属性来实现。例如，以下代码演示了如何获取按钮元素的DOM节点：

<button ref="myButton">点击我</button>

然后，我们就可以在Vue实例中使用this.$refs.myButton来访问按钮元素的DOM节点。例如，以下代码演示了如何使用ref来获取按钮元素的文本内容：

const button = this.$refs.myButton;
console.log(button.textContent); // "点击我"

2. 获取子组件的Data

ref除了可以获取本页面的DOM元素，还可以拿到子组件中的data。这可以通过在子组件的根元素上添加ref属性来实现。例如，以下代码演示了如何在父组件中获取子组件的data：

<!-- 父组件 -->
<template>
  <child-component ref="child"></child-component>
</template>

<script>
export default {
  data() {
    return {
      childData: null,
    };
  },
  mounted() {
    this.childData = this.$refs.child.data;
    console.log(this.childData); // { message: "Hello from child component" }
  },
};
</script>

<!-- 子组件 -->
<template>
  <div>
    {{ data.message }}
  </div>
</template>

<script>
export default {
  data() {
    return {
      message: "Hello from child component",
    };
  },
};
</script>

3. 父组件调用子组件中的方法

ref还可以帮助我们在父组件中调用子组件中的方法。这可以通过在子组件的根元素上添加ref属性，并在父组件中使用this.$refs.child来访问子组件的实例来实现。例如，以下代码演示了如何在父组件中调用子组件中的方法：

<!-- 父组件 -->
<template>
  <child-component ref="child"></child-component>
</template>

<script>
export default {
  methods: {
    callChildMethod() {
      this.$refs.child.sayHello();
    },
  },
};
</script>

<!-- 子组件 -->
<template>
  <div>
    {{ data.message }}
  </div>
</template>

<script>
export default {
  data() {
    return {
      message: "Hello from child component",
    };
  },
  methods: {
    sayHello() {
      alert("Hello from child component!");
    },
  },
};
</script>

4. 子组件调用父组件中的方法

在某些情况下，我们也可能需要从子组件中调用父组件中的方法。这可以通过在父组件的根元素上添加ref属性，并在子组件中使用this.$parent来访问父组件的实例来实现。例如，以下代码演示了如何在子组件中调用父组件中的方法：

<!-- 父组件 -->
<template>
  <child-component ref="child"></child-component>
</template>

<script>
export default {
  methods: {
    sayHello() {
      alert("Hello from parent component!");
    },
  },
};
</script>

<!-- 子组件 -->
<template>
  <div>
    {{ data.message }}
  </div>
</template>

<script>
export default {
  data() {
    return {
      message: "Hello from child component",
    };
  },
  methods: {
    callParentMethod() {
      this.$parent.sayHello();
    },
  },
};
</script>

5. 嵌套组件中的ref

ref还可以在嵌套组件中使用。例如，以下代码演示了如何在嵌套组件中获取子组件的DOM节点：

<!-- 父组件 -->
<template>
  <child-component ref="child">
    <grandchild-component ref="grandchild"></grandchild-component>
  </child-component>
</template>

<script>
export default {
  mounted() {
    const grandchild = this.$refs.child.$refs.grandchild;
    console.log(grandchild.textContent); // "Hello from grandchild component"
  },
};
</script>

<!-- 子组件 -->
<template>
  <div>
    {{ data.message }}
    <grandchild-component></grandchild-component>
  </div>
</template>

<script>
export default {
  data() {
    return {
      message: "Hello from child component",
    };
  },
};
</script>

<!-- 孙组件 -->
<template>
  <div>
    Hello from grandchild component
  </div>
</template>

<script>
export default {
};
</script>