在Nuxt中访问this.$el及实现表情插入可编辑div的问题

嘿，我来帮你搞定这个问题～首先看你代码里有个明显的小坑：mounted钩子用了箭头函数，箭头函数会绑定外部作用域的this，导致这里的this根本不是Vue组件实例，自然拿不到$el。另外Nuxt是SSR框架，DOM元素只能在客户端环境访问，咱们一步步来改：

方案一：修复箭头函数 + 客户端环境校验 #

先把mounted改成普通函数，让this正确指向组件实例，再加上客户端环境的判断（虽然mounted本身只在客户端执行，但加一层更稳妥，避免SSR时可能出现的报错）：

<template>
  <div contenteditable="true" @input="update"></div>
</template>
<script>
export default {
  props: {
    content: {
      type: String,
      default: '',
    },
  },
  // 换成普通函数，this才能指向组件实例
  mounted() {
    // 确保只在客户端操作DOM
    if (process.client) {
      this.$el.innerText = this.content;
    }
  },
  methods: {
    update(event) {
      this.$emit('update', event.target.innerText);
    },
  },
};
</script>

方案二：使用ref获取DOM元素（更推荐） #

比起直接用$el，Vue官方更推荐用ref来获取DOM元素，代码可读性更高，后续维护也更方便：

<template>
  <!-- 给div加上ref标识 -->
  <div ref="editableDiv" contenteditable="true" @input="update"></div>
</template>
<script>
export default {
  props: {
    content: {
      type: String,
      default: '',
    },
  },
  mounted() {
    if (process.client) {
      // 通过$refs访问指定的DOM元素
      this.$refs.editableDiv.innerText = this.content;
    }
  },
  methods: {
    update(event) {
      this.$emit('update', event.target.innerText);
    },
  },
};
</script>

额外小提示 #

如果你的表情是HTML格式（比如<img>标签），那innerText就不适用了，得换成innerHTML，但要注意XSS安全风险，记得对传入的content做内容过滤哦～

内容的提问来源于stack exchange，提问作者Jayd