zoukankan      html  css  js  c++  java
  • 学习笔记:Vue——处理边界情况

    访问元素&组件

    01.访问根实例 $root

    // Vue 根实例
    new Vue({
      data: {
        foo: 1
      },
      computed: {
        bar: function () { /* ... */ }
      },
      methods: {
        baz: function () { /* ... */ }
      }
    })

    所有的子组件都可以将这个实例作为一个全局store来访问或使用

    // 获取根组件的数据
    this.$root.foo
    
    // 写入根组件的数据
    this.$root.foo = 2
    
    // 访问根组件的计算属性
    this.$root.bar
    
    // 调用根组件的方法
    this.$root.baz()

    02.访问父级组件实例 $parent

    $parent可以在后期随时触达父级组件,以替代将数据以prop的方式传入子组件的方式

    注意:在绝大多数情况下,触达父级组件会使得你的应用更难调试和理解。

    03.访问子组件实例或子元素 ref

    <base-input ref="usernameInput"></base-input>
    this.$refs.usernameInput

    该<base-input>组件也可以使用一个类似的ref提供对内部这个指定元素的访问,例如:

    <input ref="input">

    甚至可以通过其父级组件定义方法:

    methods: {
      // 用来从父级组件聚焦输入框
      focus: function () {
        this.$refs.input.focus()
      }
    }

    这样就允许父级组件通过下面的代码聚焦<base-input>里的输入框:

    this.$refs.usernameInput.focus()

    注意:$refs只会在组件渲染完成之后生效,并且它们不是响应式的。你应该避免在模板或计算属性中访问$refs

    04.程序化的事件侦听器 $emit

    $emit可以被v-on侦听

    • 通过$on(eventName, eventHandler) 侦听一个事件
    • 通过$once(eventName, eventHandler) 一次性侦听一个事件
    • 通过$off(eventName, eventHandler) 停止侦听一个事件

    文档链接:https://cn.vuejs.org/v2/guide/components-edge-cases.html

  • 相关阅读:
    C#延时
    Java Applet 绘图
    C#调用ActiveX控件异常处理
    J2SE连连看
    基于对象的棋类程序结构设计
    MATLAB应用专题part2电力电子仿真技术
    MATLAB应用专题part1电力电子仿真技术
    硬件知识整理part2电阻在反馈网络中的应用
    C语言再学习part1宏观认识C语言
    C语言再学习part3—算法
  • 原文地址:https://www.cnblogs.com/cathy1024/p/10906448.html
Copyright © 2011-2022 走看看