vue.js - `vue-scrollto` 滚动组件，调用`$scrollTo`的时候，第一个参数，如何通过ref的形式传入？

Question

vue-scrollto 滚动组件，调用$scrollTo的时候，第一个参数，如何通过ref的形式传入？

例如：

通常 this.$scrollTo(#xxxxxx, 500, {container: '.myform'})

想把第一个参数通过 ref 的形式传入，该如何写？

Answer 1

如果你想通过ref的形式来调用vue-scrollto的$scrollTo方法，你可以使用Vue的ref方法来创建一个引用，然后在你的方法中通过这个引用来获取你需要滚动到的元素。

以下是一个例子：

<template>  <div>    <button @click="scrollToElement">Scroll to Element</button>    <div ref="myElement" id="xxxxxx">Hello World!</div>  </div></template><script>import VueScrollTo from 'vue-scrollto'export default {  components: {    VueScrollTo  },  methods: {    scrollToElement() {      this.$scrollTo(this.$refs.myElement, 500, {container: '.myform'})    }  }}</script>

在这个例子中，我们首先在模板中创建了一个按钮和一个div元素，并为div元素添加了一个ref属性，值为"myElement"。然后我们在脚本中定义了一个名为"scrollToElement"的方法，在这个方法中，我们使用this.$refs.myElement来获取我们之前通过ref创建的引用，然后将其作为第一个参数传递给$scrollTo方法。