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. 我在B站学习 Javascript入门教程 基础

    B站av9243452的一系列视频,适合学过其他编程语言的人观看,还挺不错的 共43节,该随笔为1~16节 Js介绍 如需使用外部文件,请在 <script> 标签的 "src& ...

  2. DozerBeanMapper 配置

    applicationContext.xml <bean id="mapper" class="org.dozer.spring.DozerBeanMapperFa ...

  3. springBoot使用外部Tomcat启动项目

    实现思路是: 将springBoot项目自带的tomcat在部署的时候不使用. 方法一:将springBoot自带tomcat编辑成只在编译和测试时使用. 转载出处:https://www.edurt ...

  4. HAProxy负载均衡安装配置

    1.下载HAProxy    http://haproxy.1wt.eu/download/1.4/src/haproxy-1.4.22.tar.gz   2. 安装haproxy    #tar z ...

  5. iOS开发ReactiveCocoa学习笔记(二)

    RAC 中常见的宏: 使用宏定义要单独导入 #import <RACEXTScope.h> 一. RAC(TARGET, [KEYPATH, [NIL_VALUE]]):用于给某个对象的某 ...

  6. 项目开发bug记录

    项目开发中遇到了一个问题,类中出现未知属性 ‘ $jacocoData ’,准确的来说,实际上在集成测试阶段,系统自动运行测试用例时,抛出来的异常提示信息,但是在开发阶段是不存在的.这个问题是以前没有 ...

  7. Photoshop之切图

    基本(繁琐)操作: 切JPG图(即带背景的图): 1.         选切片工具(另外,切片选择工具能选择切片和删除切片),切 2.         存储为Web所用格式(快捷键Ctrl + Shi ...

  8. 使用vuex管理数据

    src/vuex/store.js 组件里面使用引入store.js,注意路径 import store from 'store.js' 然后在使用的组件内data(){}同级放入store 三大常用 ...

  9. echarts的title和legend重合解决(各种小细节)

    一:关于title与legend重叠 1.重合样子 2.解决办法: legend:{ show: true, top:"6%",//与上方的距离 可百分比% 可像素px }, 3. ...

  10. 网页游戏中PK系统的实现

    在游戏开发过程中,写过一个简单的PK系统面板,涉及到前端和后端的交互,我将自己制作的流程分享给大家,大概流程是这样:前端发送PK邀请给后端,后端受到请求后将信息返回给前端处理,先来看下整个流程图及思路 ...