# 一、Vue之实例属性

Vue 实例暴露了一些有用的实例属性与方法。这些属性与方法都有前缀 $，以便与代理的数据属性区分

组件树

• $parent：用来访问组件实例的父实例
• $root: 用来访问当前组件树的根实例
• $children:用来访问当前组件实例的直接子组件实例
• $refs:用来访问v-ref指令的子组件

DOM访问

• $el：用来挂载当前组件实例的dom元素
• $els：用来访问$el元素中使用了v-el指令的DOM元素

<div id="app2">
    {{ message }}
</div>
<script>
    var vm2 = new Vue({
        el:"#app2",
        data:{
            message : "I am message."
        }
    });
    console.log(vm2.$el);          //vm2.$el === 原生js中document.getElementById("app2") 
    vm2.$el.style.color = "red";   //变成红色
</script>

数据访问

• $data：用来访问组件实例观察的数据对象
• $options：用来访问组件实例化时的初始化选项对象

DOM方法的使用

• $appendTo(elementOrSelector, callback)：将el所指的DOM元素插入目标元素
• $before(elementOrSelector, callback)：将el所指的DOM元素或片段插入目标元素之前
• $after(elementOrSelector, callback)：将el所指的DOM元素或片段插入目标元素之后
• $remove(callback)：将el所指的DOM元素或片段从DOM中删除
• $nextTick(callback)：用来在下一次DOM更新循环后执行指定的回调函数

event方法的使用

• 监听

  • $on(event, callback)：监听实例的自定义事件
  • $once(event, callback)：同上，但只能触发一次

• 触发

  • $dispatch(event, args)：派发事件，先在当前实例触发，再沿父链一层层向上，对应的监听函数返回false停止
  • $broadcast(event, args)：广播事件，遍历当前实例的$children，如果对应的监听函数返回false，就停止
  • $emit(event, args)：触发事件

<div id="ap2">
    <p>{{ num }}</p>
    <button @click="increase1"> add </button>
</div>
<button onclick="reduce2()"> reduce2 </button> <button onclick="offReduce()"> off reduce </
Preview
一、Vue之实例属性
二、实例方法
2.1 $.watch()
2.2 vm.$nextTick
← vue项目中的痛点（十四）vue-axios封装请求（十二） →