vue笔记

Vue 知识大全: https://qianduan.group/posts/5a4dfd3770f2ba7107d5a776
https://qianduan.group/posts/5a56f8df0cf6b624d2239c3c

main.js

import promise from 'es6-promise';
import 'babel-polyfill'
import Vue from 'vue'
import App from './App'
import router from './router'
import store from './store'
import Http from './utils/http'
import api from './utils/api'
import apiNew from './utils/api_new'
import './utils/filter'
import './utils/components_use'
//公共组件
// import header from 'components/header/header'
// import footer from 'components/footer/footer'

// Vue.use(header);
// Vue.use(footer);

promise.polyfill();
Vue.config.productionTip = false;

Vue.prototype.$http = new Http(store, api);
Vue.prototype.API = api;
Vue.prototype.newAPI = apiNew;

// store.dispatch('get_common_data'); //公共的数据
/* eslint-disable no-new */
new Vue({
  el: '#app',
  router,
  store,
  template: '<App/>',
  components: { App },
  watch:{
    "$route":{
        handler(route){
            // //获取未登录token
            // store.dispatch('get_token'); //获取token
        }

    }
  }
})

<div  @click="showAll($event)">全部</div>

节点   event.srcElement
		event.srcElement.tagName.toLowerCase() == "span"
		event.srcElement.parentNode.classList.add("active");
		event.srcElement.classList.add("active");
  

父组件传过来的值，深度监听

props:['goodsList'],
watch: {
		goodsList: { handler(newValue,oldValue){
			if(newValue){
                this.subtotal = newValue.subtotal;
            }
		},
		deep:true						//深度监听
		}
	},

vue router 改变路由参数页面不刷新问题

监听路由变化

 beforeRouteUpdate (to, from, next) {
    if((to.path == from.path) && to.query != from.query ){
        this.$children[1].init(to.query);		//调用第二个子组件的初始化方法刷新数据
        this.$children[2].init(to.query);
    }
    next();
  },

注意： 如果目的地和当前路由相同，只有参数发生了改变 (比如从一个用户资料到另一个 /users/1 -> /users/2)，你需要使用 beforeRouteUpdate 来响应这个变化 (比如抓取用户信息)。

父子、兄弟组件之间的传值