Vue中是否有任何函数来检查子组件中的DOM是否已更新

Question

我有这个问题，其中，我无法选择子组件内的DOM元素。据记载，我正在使用更新的方法，但在根组件内。

而且它的工作原理有点不可思议，

Vue.component('newdiv', { 
 
    template: ` 
 
    <div class="msg-wrap"> 
 
     <p v-html='this.$parent.message' class="msg-p"></p> 
 
     <p v-html='this.$parent.message1' class="msg-p"></p> 
 
    </div> 
 
`, 
 
    updated: function() { 
 
    this.$nextTick(function() { 
 
     $('.blue').css('color', 'blue'); 
 
    }); 
 
    } 
 
}); 
 

 
new Vue({ 
 
    el: '#app', 
 
    data: { 
 
    message: 'Hello this is para 1', 
 
    message1: 'Hello this is para 2', 
 
    }, 
 
    methods: { 
 
    ajaxCallEx() { 
 
     // think ajax call has happened and returns an html 
 
     this.message = "<p> Hiiii This is a p1 <span class='red'> make me red </span> </p>"; 
 
     this.message1 = "<p> Hiiii This is a p2 <span class='blue'> make me blue </span> </p>"; 
 
    } 
 
    }, 
 
    updated: function() { 
 
    this.$nextTick(function() { 
 
     // you will see that this dosen't work as the element is not present 
 
     $('.red').css('color', 'red'); 
 

 
    }); 
 
    } 
 
})

<script src="https://unpkg.com/[email protected]/dist/vue.min.js"></script> 
 
<script src="https://unpkg.com/jquery"></script> 
 

 
<div id="app"> 
 

 
    <newdiv></newdiv> 
 
    <button @click="ajaxCallEx">Clik Me</button> 
 
</div>

这里按钮点击蓝色的第变为蓝色，而红色remmain，因为它是（因为它不存在于DOM然而）。

所以我的第一个假设是父组件的更新方法先被调用，然后发生子元素的渲染。这适用于这种情况。但只是为了证明我的权利，我没有尝试以下方法，

Vue.component('newdiv', { 
 
    template: ` 
 
    <div class="msg-wrap"> 
 
    <p v-html='this.$parent.message' class="msg-p"></p> 
 
    <p v-html='this.$parent.message1' class="msg-p"></p> 
 
    </div> 
 
`, 
 
    updated: function() { 
 
    this.$nextTick(function() { 
 
     $('.blue').css('color', 'blue'); 
 
    }); 
 
    } 
 
}); 
 

 
new Vue({ 
 
    el: '#app', 
 
    data: { 
 
    message: 'Hello this is para 1', 
 
    message1: 'Hello this is para 2', 
 
    message3: 'Hello this is root para' 
 
    }, 
 
    methods: { 
 
    ajaxCallEx() { 
 
     // think ajax call has happened and returns an html 
 
     this.message = "<p> Hiiii This is a p1 <span class='red'> make me red </span> </p>"; 
 
     this.message1 = "<p> Hiiii This is a p2 <span class='blue'> make me blue </span> </p>"; 
 
     this.message3 = "<p> Hiiii This is a root para <span class='green'> make me green</span> </p>"; 
 
    } 
 
    }, 
 
    updated: function() { 
 
    this.$nextTick(function() { 
 
     // you will see that this dosen't work as the element is not present 
 
     $('.red').css('color', 'red'); 
 

 
     // this will work and it will only color the p directly within the root. 
 
     $('.green').css('color', 'green'); 
 
    }); 
 
    } 
 
})

<script src="https://unpkg.com/[email protected]/dist/vue.min.js"></script> 
 
<script src="https://unpkg.com/jquery"></script> 
 

 
<div id="app"> 
 
    <p v-html='this.message3'></p> 
 
    <newdiv></newdiv> 
 
    <button @click="ajaxCallEx">Clik Me</button> 
 
</div>

按照从最后的实验我的理解，在按钮的点击，我希望绿转绿，蓝转蓝色，而红色不应该工作。但在这种情况下，检测到的所有元素和颜色都已正确涂漆。

我想知道更新的工作原因，为什么在第一种情况下，它无法获取子组件中的元素，为什么在第二种情况下它能够获取元素。 是否有一个钩子或事件让root知道它的所有孩子已经被渲染？

Answer 1

你在这里做的事情很奇怪。你不应该达到的message从父，但将它作为一个道具：

Vue.component('newdiv', { 
    template: ` 
     <div class="msg-wrap"> 
      <p v-html='message' class="msg-p"></p> 
      <p v-html='message1' class="msg-p"></p> 
     </div> 
     `, 
    props: ['message', 'message1'] 
}); 

new Vue({ 
    el: '#app', 
    methods:{ 
    ajaxCallEx(){ 
     this.message = "<p> Hiiii This is a p1 <span class='red'> make me red </span> </p>"; 
     this.message1 = "<p> Hiiii This is a p2 <span class='blue'> make me blue </span> </p>"; 
    } 
    }, 
    data:{ 
    message: 'Hello this is para 1', 
    message1: 'Hello this is para 2' 
    } 
}) 

这里的的jsfiddle：https://jsfiddle.net/craig_h_411/e6nvb63m/

显然，这并不风格做任何事，这样做，你只是需要将这些类添加到您的文件中，而不是注入它们。

.red{ 
    color:red 
} 

.blue{ 
    color:blue 
} 

参见：https://jsfiddle.net/craig_h_411/60o3ypbf/

如果由于某种原因，你就需要在运行时应用样式，你可以使用一个watcher观看道具和应用的颜色（这需要在一个$nextTick做），这里的整个事情：

Vue.component('newdiv', { 
    template: ` 
     <div class="msg-wrap"> 
      <p v-html='message' class="msg-p"></p> 
      <p v-html='message1' class="msg-p"></p> 
     </div> 
     `, 
    props: ['message', 'message1'], 
    methods: { 
    applyColor(className, color) { 
     let els = document.getElementsByClassName(className) 
     Array.prototype.forEach.call(els, el => { 
      el.style.color = color 
     }) 
     }, 
     applyClassStyles() { 
     this.applyColor('red', 'red') 
     this.applyColor('blue', 'blue') 
     } 
    }, 
    watch: { 
    message() { 
     this.$nextTick(() => { 
      this.applyClassStyles(); 
     }); 

     }, 
     message1() { 
     this.$nextTick(() => { 
      this.applyClassStyles(); 
     }); 
     } 
    }, 

}); 

new Vue({ 
    el: '#app', 
    methods: { 
    ajaxCallEx() { 
     this.message = "<p> Hiiii This is a p1 <span class='red'> make me red </span> </p>"; 
     this.message1 = "<p> Hiiii This is a p2 <span class='blue'> make me blue </span> </p>"; 
    } 
    }, 
    data: { 
    message: 'Hello this is para 1', 
    message1: 'Hello this is para 2' 
    } 
}) 

我只是用香草JavaScript，但你能坚持到jQuery的达到相同的效果，而且这里的的jsfiddle：https://jsfiddle.net/craig_h_411/zdfxodyg/