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)  //<p ref="header">头部</p>

　　　　　　　　　　} 
　　　　　　　})

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)   //更改后数据
                    })
                }
            })