首页   注册   登录
V2EX = way to explore
V2EX 是一个关于分享和探索的地方
现在注册
已注册用户请  登录
vue.js
V2EX  ›  Vue.js

Vue 组件销毁前怎么访问组件内部的 DOM

  •  
  •   jorneyr · 99 天前 · 635 次点击
    这是一个创建于 99 天前的主题,其中的信息可能已经有所发展或是发生改变。
    <template>
        <div class="demo">
            <div id="fox">....</div>
        </div>
    </template>
    
    <script>
    export default {
        mounted() {
            console.log(document.querySelector('#fox')); // 输出: <div id="fox">....</div>
        },
        beforeDestroy() {
            console.log(document.querySelector('#fox')); // 输出: null
        },
        destroyed() {
            console.log(document.querySelector('#fox')); // 输出: null
        }
    };
    </script>
    

    上面定义了一个简单的 Vue 组件, 组件在销毁的时候需要先访问一下 #fox 这个 DOM, 但是 Vue 提供的生命周期函数里没有找到组件即将销毁, 但是还没有消息 DOM 的钩子.

    为什么需要在组件销毁前还要访问一下 DOM 呢? 是因为项目中封装富文本编辑器 TinyMCE 为 Vue 组件方便使用, 组件销毁前需要把 TinyMCE 对象销毁, 但是 beforeDestroy() 或者 destroyed() 中 TinyMCE 对象依附的 DOM 已经访问不到, 导致销毁 TinyMCE 对象的函数 tinymce.remove('#editor') 没有被执行.

    7 回复  |  直到 2019-01-16 15:50:16 +08:00
        1
    loy6491   99 天前 via iPhone
    销毁时还要重新查找 DOM ?感觉不会这么设计吧。按理说编辑器创建时就应该有一个实例给你引用,销毁这个就行了。
        2
    jorneyr   99 天前
    @loy6491 已经保存了 TinyMCE 的对象 editor, 但是不能调用 editor 的函数直接进行销毁, 而是需要 tinymce.remove('#editor') 这个方法.
        3
    loy6491   99 天前 via iPhone
        4
    jorneyr   99 天前
    @loy6491 谢谢了, 从里面找到销毁编辑器的代码 this.editor.remove(), 可以使用.
        5
    SilentDepth   99 天前
    用 `ref` 不好吗
        6
    jorneyr   99 天前
    ref 也试过的, beforeDestroy() 里已经是 null
        7
    Fiona7heHuman   94 天前
    可以使用指令 directives,指令的生命周期里面有一个 unbind,指令解绑时的钩子,指令只有在 dom 被销毁时会解绑,试试看!
    关于   ·   FAQ   ·   API   ·   我们的愿景   ·   广告投放   ·   感谢   ·   实用小工具   ·   799 人在线   最高记录 4385   ·  
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.3 · 17ms · UTC 22:35 · PVG 06:35 · LAX 15:35 · JFK 18:35
    ♥ Do have faith in what you're doing.
    沪ICP备16043287号-1