组件传值

vuex处理组件之间的数据交互

如果业务逻辑复杂，很多组件之间需要同时处理一些公共的数据，这个时候才有上面这一些方法可能不利于项目的维护，vuex的做法就是将这一些公共的数据抽离出来，然后其他组件就可以对这个公共数据进行读写操作，这样达到了解耦的目的。

安装vuex    npm install vuex --save

在 store/index.js写入：

import Vue from 'vue'
import Vuex from 'vuex'

Vue.use(Vuex)

const store = new Vuex.Store({
  strict:true,  // 开启严格模式  确保state 中的数据只能 mutations 修改
  state:{
    count:0
  }
})

export default store;

在main.js中引入：

import store from './store'

new Vue({
  el: '#app',
  router,
  store,
  components: { App },
  template: '<App/>'
})

 此时可以在组件中使用 this.$store.state.count 获取store中state的值。如：

<template>
  <div class="hello">
    <h2>{{count}}</h2>
  </div>
</template>

<script>
export default {
  name: 'HelloWorld',
  computed:{
     count(){
       return this.$store.state.count;
     }
  }
}
</script>

很多时候咱们要对state里的值进行操作，在vuex提供了一个方法mutations

mutations用法(使用mutations可以修改state的值)

在store/index.js中写入：

  state:{
    count:0
  },
  mutations:{ // 更改数据的方法
    add(state){
      state.count++
    },
    //提交载荷用法
//     add(state,n){  
//      state.count += n
//    },
    sub(state){
      state.count--
    }
  }

在组件中使用mutations中对应的方法

<template>
  <div class="hello">
    <button @click="add">+</button>
    <h2>{{count}}</h2>
    <button @click="sub">-</button>
  </div>
</template>

<script>
export default {
  name: 'HelloWorld',
  computed:{
     count(){
       return this.$store.state.count;
     }
  },
    methods:{
    add(){
      this.$store.commit('add');
    },
    
    //提交载荷用法
   // add(){  
   //    this.$store.commit('add',10);
   // },
   
   //对象风格的提交方式
   //   store.commit({
   //     type: 'add',
   //     n: 10
   //     })
   
    sub(){
      this.$store.commit('sub');
    }
  }
}
</script>

 此时就可以对count进行修改了

 

路由传参

路由对象如下图所示：

在跳转页面的时候，在js代码中的操作如下，在标签中使用<router-link>标签

this .$router.push({
                         name:  'routePage' ,
                         query/ params : {
                             routeParams:  params
                         }

需要注意的是，实用params去传值的时候，在页面刷新时，参数会消失，用query则不会有这个问题。

这样使用起来很方便，但url会变得很长，而且如果不是使用路由跳转的界面无法使用。

取值方式分别为：this.$route.params.paramName和this.$route.query.paramName

 

通过$parent,$chlidren等方法调取用层级关系的组件内的数据和方法

通过下面的方法调用：

this .$parent.$data.id   //获取父元素data中的id
this .$children.$data.id   //获取父元素data中的id

这样用起来比较灵活，但是容易造成代码耦合性太强，导致维护困难

 

通过localStorage或者sessionStorage来存储数据

setItem存储value
用途：将value存储到key字段
用法：.setItem( key, value)
代码示例：
sessionStorage.setItem("key", "value");  localStorage.setItem("site", "asd");

getItem获取value
用途：获取指定key本地存储的值
用法：.getItem(key)
代码示例：
var value = sessionStorage.getItem("key");  var site = localStorage.getItem("site");

 

全局变量使用与传值

1.创建全局文件

2.main.js中引入

3.直接在组件中使用

<template>
  <div>
    <h2>{{this.Global.title}}</h2>
  </div>
</template>

<script>
export default {
  components: {},
  props: {},
  data() {
    return {};
  },
  computed: {},
  watch: {},
  methods: {},
  created() {
      console.log(this.Global);   
  }
};
</script>
<style scoped>
</style>

 

this.$refs

一般来讲，获取DOM元素，需要使用document.querySelector('#input1')方法去获取dom节点，然后再获取input1的值。

但是使用了ref绑定之后，我们就不需要再获取dom节点了，可以直接在上面的input上绑定input1，然后$refs里面调用就行。

在JavaScript里面通过this.$refs.input1去调用，这样的做法实际上是访问VUE虚拟出来的DOM，可以有效减少获取/操作DOM节点的性能消耗。

<div id="app">
  <input type="text" ref="input1" />
  <button @click="add">添加</button>
</div>

new Vue({
  el: "#app",
  methods:{
  add:function(){
    this.$refs.input1.value = "test"; // 有效减少获取dom节点的性能消耗
    }
  }
})

这里的$refs可以看做是ref的选择器，这个$ref是一个对象，通过key可以获取到其中存放的对象。

当然了，既然是对象，也可以使用方括号运算符去访问，具体是this.$refs[input1]