vue技术杂记

以后会慢慢更新

1. 如果你的语句有一条没有执行，可以在它前面加debugger来调试

     2.想要在子组件中调用父组件的方法（如：打开model弹出框后，关闭刷新表单数据）

在父级中先provide出你要用的函数，再在子组件中inject注入

如：

父级：

export default {
  provide(){
    return {
      goBack:this.goBack
    }
  },

   goBack(){
      alert('这是一个父页面的方法');
  }
｝

子级：

<template>
   <el-button @click="backList()">返回</el-button>
</template>

export default {
     inject:['goBack'],
     backList(){
        this.goBack();
      }
｝

函数中动态变量拼接

若需要 this.plan_1这个值，拼接方法如下
choose(msg){					  	
			console.log(this["plan_"+msg])
			},

当写一个html项目引用vue和其他ui框架时（如：element-ui）时，当引用vue的版本包有问题（比如用了min） 会导致版本不匹配    让一些element-ui框架的属性失效，比如input的placeholder会附属到input的父级div上。

 

vue的Bus使用

1.定义Bus

 

import Vue from 'vue'
const Bus = new Vue()
export default Bus

2.挂载Bus

将bus挂载到vue.prototype上

 

在main.js中
import Bus from './lib/bus'

Vue.prototype.$bus = Bus

 3.子组件调用

在子组件中通过this.$bus.$on(), this.$bus.$emit()来调用,组件一给组件二赋值

• 组件一 email.vue

  <template>
    <div class="email"><button @click="handleClick">按我</button></div>
  </template>
  <script>
  export default {
  methods: {
    handleClick () {
        this.$bus.$emit('on-click','hello')
      }
    }
  }
  </script>
  <style>
    .email{
      border: 1px solid green;
     }
  </style>
  

• 组件二 tel.vue

  <template>
    <div class="tel">{{ message }}</div>
  </template>
  <script>
  export default {
  data () {
    return {
        message: ''
    }
  },
  mounted () {
      this.$bus.$on('on-click',mes => {
        this.message = mes
      })
    }
  }
  </script>
  <style >
  .tel{
    border: 1px solid red;
  }
  </style>