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

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

  •  
  •   jorneyr · 2019-01-11 21:56:14 +08:00 · 4141 次点击
    这是一个创建于 1903 天前的主题,其中的信息可能已经有所发展或是发生改变。
    <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
    loy6491
        1
    loy6491  
       2019-01-11 22:11:58 +08:00 via iPhone
    销毁时还要重新查找 DOM ?感觉不会这么设计吧。按理说编辑器创建时就应该有一个实例给你引用,销毁这个就行了。
    jorneyr
        2
    jorneyr  
    OP
       2019-01-11 22:13:41 +08:00
    @loy6491 已经保存了 TinyMCE 的对象 editor, 但是不能调用 editor 的函数直接进行销毁, 而是需要 tinymce.remove('#editor') 这个方法.
    loy6491
        3
    loy6491  
       2019-01-11 22:19:23 +08:00 via iPhone
    jorneyr
        4
    jorneyr  
    OP
       2019-01-11 22:31:42 +08:00
    @loy6491 谢谢了, 从里面找到销毁编辑器的代码 this.editor.remove(), 可以使用.
    SilentDepth
        5
    SilentDepth  
       2019-01-11 22:34:21 +08:00
    用 `ref` 不好吗
    jorneyr
        6
    jorneyr  
    OP
       2019-01-11 22:36:53 +08:00
    ref 也试过的, beforeDestroy() 里已经是 null
    Fiona7heHuman
        7
    Fiona7heHuman  
       2019-01-16 15:50:16 +08:00
    可以使用指令 directives,指令的生命周期里面有一个 unbind,指令解绑时的钩子,指令只有在 dom 被销毁时会解绑,试试看!
    关于   ·   帮助文档   ·   博客   ·   API   ·   FAQ   ·   我们的愿景   ·   实用小工具   ·   1127 人在线   最高记录 6543   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 24ms · UTC 22:55 · PVG 06:55 · LAX 15:55 · JFK 18:55
    Developed with CodeLauncher
    ♥ Do have faith in what you're doing.