Vue中如何在{{ }}插值语法的函数调用中获取目标元素？

兄弟，你这个思路其实走进死胡同啦——Vue的插值语法{{ }}本质是用来渲染数据输出的，它不像v-on事件绑定那样有天然的事件上下文（也就是$event），所以直接在插值里传$event.target是行不通的，因为这里根本没有触发事件的场景，自然拿不到对应的DOM元素~

给你几个符合Vue思路的替代方案，你可以根据自己的实际需求选：

• 场景1：组件挂载后就需要操作这个p标签
  用Vue的ref属性是最直接的方式：
  先给p标签加上ref标识：

  <p id="something" ref="targetPara">{{ someRenderData }}</p>
  

  然后在组件的mounted钩子（这时候DOM已经渲染完成）里拿到这个元素，再传给你的函数：

  mounted() {
    const paraElement = this.$refs.targetPara;
    this.yourFunction(paraElement); // 把p标签元素传给函数，想怎么操作都行
  }
  

• 场景2：数据变化时同步操作这个p标签
  如果你的函数调用是依赖某个数据的变化，那可以用watch监听数据变化，再结合ref拿元素：

  watch: {
    // 假设你依赖的是这个data里的变量
    renderData(newVal) {
      const paraElement = this.$refs.targetPara;
      this.yourFunction(paraElement, newVal); // 把元素和新数据一起传进去
    }
  }
  

• 场景3：想在模板层面直接触发函数并传元素
  可以自定义一个指令来实现，虽然有点绕，但能满足模板层面的需求：
  先在组件里注册自定义指令：

  directives: {
    passElement: {
      bind(el, binding) {
        // el就是当前绑定的p标签元素
        binding.value(el); // 把元素传给你指定的函数
      }
    }
  }
  

  然后模板里这么写：

  <p id="something" v-pass-element="yourFunction">{{ someRenderData }}</p>
  

  这样指令绑定到元素时，就会自动把p标签传给yourFunction，同时插值语法正常渲染数据。

最后多嘴提一句：Vue的核心是数据驱动视图，如果能通过修改数据来让视图自动更新（比如用v-bind绑定样式、内容），尽量别直接操作DOM哦，这才是Vue的正确打开方式~

备注：内容来源于stack exchange，提问作者ernoa