Vue实例问题集锦

1、引入bootstrap报错“Module parse failed”
原因 ：编译器无法加载bootstrap.css，导致webpack无法打包
（1）需要自行安装style-loader、less-loader、css-loader，在终端输入npm i style-loader less-loader css-loader –save-dev
（2）在webpack.config.js中module.exports->modules->rules中添加

 { test: /\.css$/, loader: "style-loader!css-loader" },
 {test: /\.less$/, loader: "style-loader!css-loader!less-loader"},
 { test: /\.(eot|woff2|ttf|woff)$/, loader: "file-loader" }

前两行是对css文件和less文件进行加载，最后一行是对bootstrap.css文件中以eot|woff2|ttf|woff结尾的文件进行加载。

2、$on和$emit的用法-组件直接传值
（1）在同一个实例上，这里this指的是vue实例

this.$emit('touch','hello')
this.$on('touch',function(a){
    alert(a);
})

（2）不在同一个实例上，需要
a、新建bus.js

import Vue from 'vue'
export var bus = new Vue()

b、App.vue里created方法里定义事件

import { bus } from 'bus.js'
// ...
created () {
  bus.$on('tip', (text) => {
    alert(text)
  })
}

c、Test.vue组件内调用

import { bus } from 'bus.js'
 // ...
bus.$emit('tip', '123')

3、element-ui中el-tabs选项卡的切换
HTML部分

<el-tabs v-model="activeName" type="border-card" value="scan" id="tabs">
        <el-tab-pane label="所有便利贴" name="scan">
          <ScanStickNote></ScanStickNote>
        </el-tab-pane>
        <el-tab-pane label="创建便利贴" name="create">
          <CreateStickNote></CreateStickNote>
        </el-tab-pane>
      </el-tabs>
      <el-button type="primary" @click="exchange">切换</el-button>

js部分

export default {
    name: 'app',
    data () {
      return {
        activeName: 'scan'
      }
    },
    components:{ElButton, ScanStickNote,CreateStickNote},
    methods:{
      exchange(){
        alert('exchange');
        this.activeName = 'scan';
      }
    },

4、vue中的路由传参，router和route要分清楚
A.vue

this.$router.push({path:'./success',query:{msg:'message'}});

B.vue

{{this.$route.query.msg}}

5、父组件向子组件传值
父组件：

<child flag="myFlag"></child>

子组件：

<template>
    <div>{{flag}}</div>
</template>
export default {
    components: {ElButton}, name: 'app',
    data () {
      return {
        stickNote: this.$store.state.stickNote,
      }
    },
    props:['flag']
  }

6、子组件向父组件传值
子组件CreateStickNote 中代码：

this.$emit('send');

父组件中代码：

<CreateStickNote  v-on:send="exchange"></CreateStickNote>

methods:{
      exchange(){
        alert('exchange');
        this.activeName = 'scan';
      }
    },

7、JS箭头函数在event bus中的应用（在$on中更新data值）

vuejs2.0开始提倡使用event bus这个机制来实现代码解耦和任何模块之间的数据通信，非常强大，但是使用中可能会遇到这样的困惑：在event handler中的this指针怎么才能够引用到event handler所在的vue instance呢？这时ES6的=>arrow函数就起到了作用，因为它不会改变this指针:

bus.$on('success',() => {
        this.activeName = 'scan';
      })

以上代码中this指的是该段代码所在的vue实例对象，对activeName赋值正确

bus.$on('success',function(){
        this.activeName = 'scan';
      })

以上代码中this指的是bus对象，该对象中没有activeName，因此赋值错误，可以将两次的this打印出来就明白了。

箭头函数和function函数的区别：
(1)箭头函数体内的this对象，就是定义时所在的对象，而不是使用时所在的对象。
(2)箭头函数不可以当作构造函数，也就是说，不可以使用new命令，否则会抛出一个错误。
(3)箭头函数不可以使用arguments对象，该对象在函数体内不存在。如果要用，可以用Rest参数代替。
(4)不可以使用yield命令，因此箭头函数不能用作Generator函数。

在这里附上一个vue-cli的小demo：https://github.com/1562428495/vue-cli-webpack-MongoDB-express