vueにおける$refs、$slot、$nexttickに関する構文

Vueインスタンスはまた、いくつかの有用なインスタンス属性と方法を暴露した.これらは、ユーザ定義属性と区別するために接頭辞$を有する.
1、$data、$el

var data = { a: 1 }
var vm = new Vue({
  el: '#example',
  data: data
})

vm.$data === data // => true
vm.$el === document.getElementById('example') // => true

2、$refs
refはDOM要素またはサブコンポーネントに参照情報を登録するために使用される.参照情報は、親コンポーネントの$refsオブジェクトに基づいて登録されます.通常のDOM要素で使用される場合、参照情報は要素です.サブコンポーネントで使用する場合、参照情報はコンポーネントインスタンスです.
refはdomレンダリングが完了した後に存在する必要があります.使用するときはdomがレンダリングが完了していることを確認します.たとえば、ライフサイクルmounted(){}フックで呼び出すか、this.$nextTick(()=>{})で呼び出されます.

　　　　　<div id="app">
            <p ref="header">  p>
            <son ref='son'>son>
            <div ref="footer">  div>
        div>
        <template id="son">
            <div>{{msg}}div>
        template>

　　　　　　 var son = {
                template:'#son',
                data(){
                    return {
                        msg:'     '
                    }
                },
            }
            var vm = new Vue({
                el:'#app',
                components:{
                    son
                },
                mounted(){
                        console.log(this.$refs.header)  //
  

　　　　　　　　　　} 
　　　　　　　})

3、$nextTick()処理非同期更新データ

　　　　　　　var son = {
                template:'#son',
                data(){
                    return {
                        msg:'     '
                    }
                },
                mounted(){
                    this.msg='     '
                }
            }
            var vm = new Vue({
                el:'#app',
                components:{
                    son
                },
                mounted(){
                    console.log(this.$refs.son.$el.innerHTML) //     
                    this.$nextTick(()=>{
                        console.log(this.$refs.son.$el.innerHTML)   //     
                    })
                }
            })

 
転載先:https://www.cnblogs.com/bing0709/p/10785061.html