this.$refs

最新推荐文章于 2024-08-11 03:48:11 发布

酷酷的旭

最新推荐文章于 2024-08-11 03:48:11 发布

阅读量3w

点赞数 16

分类专栏： vue

本文链接：https://blog.csdn.net/weixin_43195512/article/details/102895360

版权

vue 专栏收录该内容

29 篇文章 0 订阅

订阅专栏

给组件加 ref
打印结果 this.$refs.comp 是 vue 组件，this.$refs.span 打印出来的是 html 节点，这也是 ref 用在组件和 html 原生标签上的区别。
可以通过 $refs 得到组件，进而调用组件的变量和方法，如 this.$refs.comp.value 拿到了组件内部变量 value 值。所以可以通过 ref 操纵组件上的内容（推荐用 props 操纵），除非特殊情况。

mounted () {
    console.log(this.$refs.comp, this.$refs.span, this.$refs.comp.value)
  },
  template: `
    <div>
      <comp-one ref="comp">
        <span slot-scope="props" ref="span">{{props.value}} {{props.aaa}} {{value}}</span>
      </comp-one>
    </div>
  `