Vue实例所携带的方法和属性

实例属性

1.组件树访问

  • 　$parent 用来访问当前组件实例的父实例
  • 　$root 用来访问当前组件树的根实例，如果当前组件没有父实例，$root表示当前组件实例本身
  • $children 用来访问当前组件实例的直接组件实例
  • $refs 用来访问使用了v-ref指令的子组件。

2.DOM访问

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

3.数据访问

  • 　$data 用来访问组件实例观察的数据对象，该对象引用组件实例化时选项中的data属性
  • 　$options 用来访问组件实例化时的初始化选项对象

实例方法

实例化DOM方法的使用
  1. .$appendTo() 它用来将el所指的DOM元素或片段插入到目标元素中。该方法接受两个参数：
    • elementOrSelector（字符串或DOM元素），该参数可以是一个选择器字符串或者DOM元素。
    • callback（可选，函数），回调函数，该回调函数会在el元素被插入到目标元素后触发。
  2. .$before() 它用来将el所指的DOM元素或片段插入到目标元素之前。该方法接受两个参数
    • elementOrSelector（字符串或DOM元素），该参数可以是一个选择器字符串或者DOM元素
    • callback（可选，函数），回调函数
  3. $after() 它是用来将el所指的DOM元素或片段插入到目标元素之后。该方法接受两个参数，同上
  4. $remove() 它是用来将el所指的DOM元素或片段从DOM中删除。该方法接受一个参数
    • callbak（可选参数）同上
  5. $nextTick（） 它是用来在下次DOM更新循环后执行指定的回调函数，使用该方法可以保证DOM中的内容已经与最新数据保持同步。该方法接受一个参数:
    • callback（可选，函数），回调函数，该回调函数会在下次DOM更新循环后被执行。它和全局的Vue.nextTick方法一样，不同的是，callback中的this会自动绑定到调用它的Vue实例上。

实例Event方法的使用
  1. $on() 该方法用来监听实例上的自定义事件。该方法接受两个参数：
    • event（字符串），该参数可以是一个事件名称
    • callback（函数），回调函数，该回调函数会在执行$emit、$broadcast、$dispatch后触发
  2. once() 该方法也是用来监听实例上的自定义事件，但只触发一次。该方法接受两个参数 。同$on
  3. $emit()该方法用来触发事件，接受两个参数
    • event(字符串)，该参数可以是一个事件名称
    • args(可选)，传递给监听函数的参数
  4. $off()该方法用来删除事件监听，该方法接受两个参数，同$on()