Vue之处理边界情况

处理边界情况

All the features on this page document the handling of edge cases,meaning unusual situations that sometimes require bending Vue’s rules a little. Note however, that they all have disadvantages or situations where they could be dangerous.

特殊情况下的处理方式,有利有弊

1. 访问元素&组件

1.1 访问根实例(Accessing the Root Instance )

通过 this.$root 根实例

 // The root Vue instance
new Vue({
  data: {
    foo: 1
  },
  created:function(){
    
    // 【获取根组件的数据】
    console.log(this.$root.foo); 
    
    // 【写入根组件的数据】
    this.$root.foo = 2

    // 【访问根组件的计算属性】
    this.$root.bar;
  },
  computed: {
    bar: function () {
      alert('我是计算属性bar,只要有人访问我或者改变我的值,我就执行')
    }
  },
  methods: {
    baz: function () {
      alert('baz')
    }
  }
})

这种适合小型代码量时使用,中大型项目还是推荐用 Vuex来管理应用的状态:如下

用根实例获取状态 VSVuex管理状态
在这里插入图片描述
完整代码

1.2 访问父组件实例

Similar to $root, the $parent property can be used to access the parent instance from a child.
This can be tempting to reach for as a lazy alternative to passing data with a prop.

父组件通过prop向子组件传值,子组件也可通过$parent访问父组件的值

1.3 访问子组件或子元素

通过$refs访问子组件,注意: $refs 只会在组件渲染完成之后生效。

<div id="app">
    <base-input ref="usernameInput"></base-input>
</div>

<script>
    Vue.component("base-input", {
        template: "<input type='input' ref='input'>",
        methods: {
            popUp() {
                alert(11)
            },
            focus: function () {
                this.$refs.input.focus()
            }
        }
    });

    new Vue({
        el: "#app",
        data: {},
        mounted: function () {
            this.$refs.usernameInput.popUp();
            this.$refs.usernameInput.focus();
        }
    });
</script>

完整代码

1.4 依赖注入

In fact, you can think of dependency injection as sort of “long-range props”

使用props是父组件向子组件共享数据
而使用依赖注入是父组件向所有的子孙组件共享数据(可跨层级的分享数据)
使用方法:

// 父组件中抛出要分享的数据
provide: function () {
  return {
    getMap: this.getMap
  }
}

// 在子组件中注入一下就可以用了,so easy!
inject: ['getMap']

2. 程序化的事件监听(Programmatic Event Listeners )

  • Listen for an event with $on(eventName, eventHandler)
  • Listen for an event only once with $once(eventName, eventHandler)
  • Stop listening for an event with $off(eventName, eventHandler)

当你需要在一个组件实例上手动侦听事件时,它们是派得上用场的

<div id="app">
    <input ref="dateInput" v-model="date" type="text" />
</div>

<script>
    new Vue({
        el: "#app",
        data: {
            date: null
        },
        mounted: function() {
            var picker = new Pikaday({
                field: this.$refs.dateInput,
                format: "YYYY-MM-DD"
            });

            this.$once("hook:beforeDestroy", function() {
                picker.destroy();
            });
        }
    });
</script>

完整代码

3. 循环引用

3.1 递归组件

Components can recursively invoke themselves in their own template. However, they can only do so with the name option

组件可以在自身模板中调用自己,注意:不要陷入无限循环

<div id="app">
    <base-input></base-input>
</div>

<script>
   
    Vue.component("base-input", {
        name: 'stack-overflow',
        template: '<div><stack-overflow></stack-overflow></div>'   // 无限循环:报错:Maximum call stack size exceeded
    });

    new Vue({
        el: "#app",
        data: {}
    });
</script>

3.2 组件之间的循环引用

常见场景:渲染多层级结构时会用到

4. 定义模板的另外两种方式

4.1 Inline Template

这种方式会放模板的作用域容易混淆,不推荐,还是推荐用组件中的 template 选项或者.vue文件中的元素

<my-component inline-template>
  <div>
    <p>These are compiled as the component's own template.</p>
    <p>Not parent's transclusion content.</p>
  </div>
</my-component>

4.2 X-Template

这个有点像mustuche模板的用法

<script type="text/x-template" id="hello-world-template">
  <p>Hello hello hello</p>
</script>

Vue.component('hello-world', {
  template: '#hello-world-template'
})

5. 控制更新(Controlling Updates)

5.1 强制更新

If you find yourself needing to force an update in Vue, in 99.99% of cases, you’ve made a mistake somewhere.

使用 $forceUpdate 强制更新,注意:需要强制更新的情况极少,99%可能性是你哪边出错了

5.2 通过 v-once 创建低开销的静态组件

要渲染的静态内容很多,明显影响了渲染性能时可以用,一般不要用。

Vue.component('terms-of-service', {
  template: `
    <div v-once>
      <h1>Terms of Service</h1>
      ... a lot of static content ...
    </div>
  `
})

更多Vue文档解读:《Vue Doc 笔记》

热门文章

暂无图片
编程学习 ·

Java实训心得一

Java第一次实训 第一次实训任务很简单 一: 编写学生管理系统功能结构图利用xmind编写结构图 图示:二:用Navicat工具创建数据库及表格创建student数据库 2.创建t_colledge表并进行设计,插入数据创建t_status表并进行设计,插入数据创建t_student表并进行设计,插入数据创建t…
暂无图片
编程学习 ·

删除和关闭docker容器

查看所有正在运行容器 docker ps 查看所有容器 docker ps -a 查看所有容器ID docker ps -a -q 停止某个具体容器 docker stop 容器ID stop停止所有容器 docker stop $(docker ps -a -q) remove删除容器 docker rm 容器ID remove删除所有容器 docker rm $(docker ps -a -q) ps查…
暂无图片
编程学习 ·

MongoDB安装及服务配置

MongoDB安装官网下载:https://www.mongodb.com/download-center/community----介绍https://www.cnblogs.com/dreamsqin/p/10885038.html 安装到D盘MongoDB目录下,将D:\MongoDB\bin配置到环境变量path下 在MongoDB下创建data、log文件夹 测试MongDB是否安装成功 – 打开cmd命令…
暂无图片
编程学习 ·

JS笔记(一)

1.JS基本类型:ECMAScript 中有5种简单数据类型(也称为基本数据类型):Undefined,Null,Boolean,Number和String。一种复杂数据类型:object# typeOf null 的结果为Objectvar n = null var flag = true var s = str var num = 11 var un = undefinedconsole.log(typeof(n)); …
暂无图片
编程学习 ·

Obliv-C使用详解

前期说明 Obliv-C是一款GCC包装器,其作者在C语言的基础上对其进行了一定的类C处理,添加了一些规则限制,用于模拟实现混淆电路 Obliv-C不需要手动混淆,只需要调用其中的函数便可实现混淆电路,其不涉及真实硬件电路仿真,即无法导出函数对应的基本元电路(也可能是博主没有成…
暂无图片
编程学习 ·

quartus ii 使用modelsim altera进行仿真

第一种:先随便写一个程序,有输入,有时钟,有输出再点击processing-->start-->start test bench template writer然后就会在modlsim的文件中生成一个.vt的文件 然后打开这个文件接下来就是再initial和always里面添加信号保存,再点击首先看仿真软件是不是modelsin-altera,再…
暂无图片
编程学习 ·

小样本如何选择学习方法

小样本该如何学习: https://zhuanlan.zhihu.com/p/152122909 小样本学习专栏:https://zhuanlan.zhihu.com/c_1258398000180768768 若喜欢,请关注知乎专栏账号,后面持续更新小样本学习相关内容。
暂无图片
编程学习 ·

Git上传项目到GitHub

windows上传文件到github的方法 文章目录windows上传文件到github的方法一、创建github的账号:二、安装git:三、上传简单来说就是以下几个命令:Git常见错误与操作:error: src ref spec master does not match any以及failed to push some refs to 。。。解决办法,再来一遍…
暂无图片
编程学习 ·

Django开发

一.创建django项目二.新建应用 1. 建立应用python manage.py startapp 应用名2. 在[setting]->[INSTALLED_APPS]建立应用三. 建立数据库 1. 编写文章数据模型类2. 建立迁移文件 python manage.py makemigrations3. 生成数据库 python manage.py migrate四.建立超级管理员 p…
暂无图片
编程学习 ·

JavaScript之组合式继承

继承的概念 面向对象的三大特征:封装,继承,多态 封装: 将复杂的操作包裹起来,进行隐藏,简单化,安全化 继承: 拿来主义,自己没有,把别人的拿过来,让其成为自己的 JavaScript中有两种继承模型: 1.原型式继承 2.组合式继承 组合式继承就是将其他对象中的成员添加到自己…
暂无图片
编程学习 ·

Git 操作文档

Git 网站操作1.打开Git的网站,注册一个账号2.注册成功,登录之后是这样3.点击 New Project 新建一个项目填写完成之后选择一下项目的“可见等级”;有:“ Private (私有)” 、“ Internal (内部)”、“ Public (公开)”点击 “ Create Project ”按钮,这个时候项目就已…
暂无图片
编程学习 ·

elasticsearch

1. elasticsearch基本操作 1.1. 基本概念 Elasticsearch也是基于Lucene的全文检索库,本质也是存储数据,很多概念与MySQL类似的。 对比关系: 索引(indices)----------------------Databases 数据库类型(type)--------------------------Table 数据表文档(Document)--…
暂无图片
编程学习 ·

【位运算???】 190 颠倒二进制位

题目 颠倒给定的 32 位无符号整数的二进制位。 思路 取当前 n 的最后一位:n & 1 将最后一位移动到对应位置,第一次为 31 位,第二次是 30 位,即:31、30、29… 1、0,写作代码 bit << 31; 退出条件,二进制反转时,如果剩余位数全位 0,则可以不用再反转。 <&l…
暂无图片
编程学习 ·

react状态管理之MobX

创建一个store.js文件 import { observable, action } from mobx class Store{@observable state ={name: jay}@action changeName = ()=> {this.state = {name: mm}] }const allStore = {oneStore: new Store() }创建一个父组件 index.js import React,{ Component } fro…
暂无图片
编程学习 ·

URLSearchParams获取第一个参数返回null

问题 js中常使用URLSearchParams来解析url,只要把url作为URLSearchParams的参数传入,就能获取解析后的URLSearchParams对象,通过get()来获取指定的url参数.但是获取url中第一个参数的时候会出现获取值为null的情况. 解决方法 直接上代码 const url = new URL(http://example.co…
暂无图片
编程学习 ·

NUXT.JS学习笔记

目录结构├── assets // 资源文件。用于组织未编译的静态资源入LESS、SASS 或 JavaScript │ └── logo.jpg // 默认logo图片 ├── components // 组件。用于自己编写的Vue组件,比如滚动组件,日历组件…