淘先锋技术网

首页 1 2 3 4 5 6 7

在Vue中,指向当前组件实例的常用方法有两种:$refs 和 this。$refs 允许我们通过在DOM元素上设置 ref 属性来访问该元素的组件实例。而 this 则是指向Vue组件实例的一个指针。


    
        <template>
          <div ref="myDiv">
            I am a div.
          </div>
        </template>
        <script>
        export default {
          created() {
            console.log(this.$refs.myDiv) // 输出该元素的组件实例
          }
        }
        </script>
    

vue指向当前

在上面的代码中,我们设置了一个 ref 属性来标识该 div 元素,并通过 this.$refs.myDiv 来访问该元素的组件实例。

除了 $refs 外,Vue还提供了 this,它指向 Vue 组件实例本身,我们可以通过它来访问 Vue组件的各种数据、属性和方法:


    
        <template>
          <div>
            {{ message }}
          </div>
        </template>
        <script>
          export default {
            data() {
              return {
                message: 'Hello World'
              }
            },
            created() {
              console.log(this.message) // 输出 Hello World
            }
          }
        </script>
    

在上面的代码中,我们通过 this 来访问 Vue 组件实例的 message 数据,并在控制台输出它。