1.ref

在父组件中访问子组件实例,或者直接操作DOM元素时需要ref

<input ref="ipt">

通过this.$refs.ipt 得到此input

$refs是非响应式的,不应该在模板中做数据绑定

2.自定义事件

$on  $emit

<!--使用v-on在html中监听-->
<my-component v-on:test="callbackFun"></my-component>
<script>
//直接用$on监听
vm.$on('text',function(){})
</script>

3.跳过css检测

对于只使用js过度的元素使用v-bind:css = "false" 跳过vue对css的检测

4.自定义组件

自定义组件的名字不能用html关键字或者候选字,不然会被当成html元素来解析

5.子组件通过按钮调用父组件定义的方法

父组件:

<p @childBtn = "ServiseList"></p>

methods:{

 ServiseList(){

  router.push({

    name:'search',

    params:this.ListParameter

  })

  } 

}

子组件:

<button type="button" @click="commonality"></button>

methods:{

  commonality(){

    this.$emit("childBtn ")

  }

}

vue 采坑的更多相关文章

  1. VUE 采坑之旅-- Mint-ui 按需引入报出Module build failed: Error: Couldn't find preset "es2015" relative to directory "C:\\phpStudy\\PHPTutorial\\WWW\\text\\vuep\\vue-demo"

    首先按照mint-ui的文档中按需引入的要求,先执行 npm install babel-plugin-component -D 然后,将.babelrc文件替换了,但是后来我又将其改了(采坑过程我也 ...

  2. vue采坑及较好的文章汇总

    1:父子组件传动态传值 https://www.cnblogs.com/daiwenru/p/6694530.html  -----互传数据基本流程 https://blog.csdn.net/qq_ ...

  3. vue采坑一:全局API

    Vue.set Vue.set( target, key, value ),target不能是 Vue 实例,或者 Vue 实例的根数据对象,因为源码中做了如下判断: var ob = (target ...

  4. vue采坑之——vue里面渲染html 并添加样式

    在工作中,有次遇到要把返回的字符串分割成两部分,一部分用另外的样式显示. 这时候,我想通过对得到字符串进行处理,在需要特别样式的字符串片段用html标签(用的span)包裹起来再通过变量绑定就好了.不 ...

  5. vue采坑记录

    1.项目在浏览器运行的时候没有ico图标 <link rel="shortcut icon" type="image/x-icon" href=" ...

  6. vue项目打包采坑

    1. vue项目打包采坑 1.1. vue运行报错error:Cannot assign to read only property 'exports' of object '#' 这个错误我是在打包 ...

  7. axios采坑之路

    POST请求设置Content-Type 由于后端采用的是form表单形式上送参数,需要设置Content-Type axios设置如下 const _axios = axios.create(con ...

  8. nuxt 2.0采坑计之 (引入静态文件css)

    nuxt 2.0采坑计之静态文件css 外部引入css 全局引用方法为   (在nuxt.config.js配置中在   module.exports = {}  中添加) head: { meta: ...

  9. Service worker (@nuxtjs/workbox) 采坑记

    PWA(Progressive Web App)是前端的大趋势,它能极大的加快前端页面的加载速度,得到近乎原生 app 的展示效果(其实难说).PWA 其实是多种前端技术的组合,其中最重要的一个技术就 ...

随机推荐

  1. java程序调用.net接口服务地址的写法

    参考文章:http://download.csdn.net/detail/davidiao/7424767 http://www.cnblogs.com/mq0036/p/3554002.html . ...

  2. C数据结构与算法-算法复杂度

    算法复杂度分为时间复杂度T(n)和空间复杂度F(n) 时间复杂度:也就是执行算法程序所需的时间,与硬件的速度.编程语言的级别.编译器的优化.数据的规模.执行的频度有关,前三个有很大的不确定性,所以衡量 ...

  3. Java面向对象_常用类库api——二叉树数据结构实现

    二叉树是每个节点最多有两个子树的有序树.通常子树被称为"左子树"和"右子树". 二叉树算法的排序规则: 1.选择第一个元素作为根节点 2.之后如果元素大于根节点 ...

  4. Redis中的LRU淘汰策略分析

    Redis作为缓存使用时,一些场景下要考虑内存的空间消耗问题.Redis会删除过期键以释放空间,过期键的删除策略有两种: 惰性删除:每次从键空间中获取键时,都检查取得的键是否过期,如果过期的话,就删除 ...

  5. vscode 插件todo-highlight

    简介 Highlight TODO,FIXME or any annotations within your code. 资源 https://marketplace.visualstudio.com ...

  6. Java的Map和Object之间的相互转换方法

    public staic Map<String, Object> objectToMap(Object obj) throws Exception { if(obj == null) re ...

  7. @property的4类修饰符

    一.读写性修饰符:readwrite | readonly readwrite:表明这个属性是可读可写的,系统为我们创建这个属性的setter和getter方法. readonly:表明这个属性只能读 ...

  8. codevs 1664 清凉冷水

    1664 清凉冷水 时间限制: 1 s 空间限制: 128000 KB 题目等级 : 黄金 Gold         题目描述 Description 闷热的夏天,威斯康辛州的奶制品地区提供冷水供奶牛 ...

  9. Sublime Text3安装SublimeGit插件

    之前一直用PhpStorm作为开发工具,但是最近使用的一台电脑上安装的老是卡死,只好用回Sublime Text3. 搜索后打开第一个链接“Sublime Text 3中使用SublimeGit插件” ...

  10. h5 本地存储

    H5本地存储有两个API,一个是Web Storage,还有一个是Web SQL.不管是哪一个,都是基于JavaScript语言来使用,接下来我就教你怎么使用H5本地存储,本文篇幅较大,JS代码较多, ...