前言

vue传参的几中基本用法，以及vue的用法。

$root 根组件

使用$root可以访问到new Vue根实例中的数据和方法

1
2
3
4
5
6
7
8
9
10
11
12
13
// main.js文件
new Vue({
  data: {
    name: '默谐'
  },
  router,
  store,
  render: h => h(App)
}).$mount('#app');
// 其他页面读取
<div>
    {{ $root.name }}
  </div>

ref refs

1
2
3
4
5
6
// 父组件中
<One :data="'传给子'" ref="RZ"></One>
// 需要在mounted中找组件，created中还未加载；
mounted(){
  console.log(this.$refs) // 普通元素加ref没有名字
},

$event

1
2
3
4
5
6
7
// 父组件中
<button v-on:click="submit($event)">点我</button>
methods: {
  submit(val) {
    console.log(val)
  },
},

$emit

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
// 子组件中
created(){
    this.send() // 放到mounted里面也可以
}
methods: {
  send(){
      this.$emit('自定义的事件名字','你要传的参数')
  }
},
// 父组件中
<One @自定义的事件名字="方法名字"></One>
// 或者
<One @自定义的事件名字="方法名字($event)"></One>
data(){
    return{
        Data=''    
    }
},
methods: {
  方法名字(x){
    this.Data = x
  },
},

$on

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
// main.js中创建一个bus的Vue中转站
Vue.prototype.bus = new Vue()
// 组件1
mounted(){
  this.send() // 必须放在这里，放在created不行；
},
methods: {
  send() {
    this.bus.$emit('oneComponent', '第一个组件的数据')
  }
},
// 组件2
created(){
  // 必须放在这里
  this.bus.$on('oneComponent', val => {
    this.message = val
  })
},

$parent 和 $children

  1. ref为子组件指定一个索引名称，通过索引来操作子组件；

  2. this.$parent 可以直接访问该组件的父实例或组件；

  3. 父组件也可以通过this.$children 访问它所有的子组件； 需要注意 $children 并不保证顺序，也不是响应式的。

父传子props

1
2
3
4
5
6
7
8
9
父元素中组件上
<component :xx='xxx'></component>
data(){
    return{
        xxx:''
    }}

// 子组件
props：['xx']

Vuex

父传子：v-bind属性绑定；再使用props属性接收

子传父：v-on事件绑定；不相干组件：EvenBus；

Vuex：是实现组件全局状态（数据）管理的一种机制，可以方便的实现组件之间的数据的共享；（响应式） 

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
// Vuex安装
npm install vuex --save
// Vuex引用
import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)
// 创建store对象
const Counter = new Vuex.Store({
  // state中存放的就是全局共享的数据
  state:{count : 0}
})
// 将store对象挂载到vue实例中，所有的组件，就可以直接从store中获取全局的数据了。
import store from './store' // main.js文件里面引用；
new Vue({
  el: '#app',
  render:h=>h(app),
  store,
  router,
})

State

1
2
3
4
5
6
7
8
// 直接访问
this.$store.state.count
// 在组件中引用，后映射为计算属性；
import {mapState} from 'vuex'
computed:{
    ...mapState(['count'])
    // ...表示展开运算符；
}

Mutation

用于变更Store的数据；（有个Payload就是后面带的参数，但是只能接受一个可以使用对象接受）。

（不推荐直接在组件中修改Store的数据，不利于维护，在项目较大时，不知道哪个地方修改了数据。

mutation不要写异步的代码，（如：vue插件会显示出问题。)

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
// 定义mutation（store中）
mutations: {
   add (state) {
     // 变更状态
     state.count++
   }
 }
 // 触发mutation(组件中)
 // 第一种
 methods:{
     handlel(){
         this.$store.commit('add')      
     }  
 }
 // 第二种
 import {mapMutations} from 'vuex'
 methods:{
     ...mapMutations(['add']) 
     handlel(){
         this.add()
     }  
 }

Action

用于处理异步任务；在Action中触发mutation中的函数，间接的处理变更数据；

在Action中不能直接修改state的数据；必须context.commit()

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
// 定义Action
actions:{
  addAsync(context){
    setTimeout(()=>{
      context.commit('add')
    },1000)
  }
}
// 触发Action
// 第一种
  methods:{
      handlel(){
          this.$store.dispatch('addAsync')
      }  
  }
  // 第二种
    import {mapActions} from 'vuex'
    methods:{
      ...mapActions(['addAsync']) 
      handlel(){
          this.addAsync()
      }        
  }
  // 可以直接上面写addAsync不需要handlel这个

Getter

用于对Store中的数据进行加工处理形成新的数据；

类似于vue的计算属性，store数据发生变化，Getter的数据也会更着变化；

1
2
3
4
5
6
7
8
9
10
11
12
// 定义Getter
  getters: {
   showNum:state=>{
       retuen '当前最新的数量是'+ state.count
   }
  // 触发Getter
  this.$store.getters.名称
  // 在组件中引用，后映射为计算属性；
  import {mapGetters} from 'vuex'
  computed:{
  ...mapGetters(['showNum'])
}

注意：使用按需触发后，再组件修改state的数据，调试工具当前页的vuex bindings中改变，而vuex中未改变，

不要误导了；

Modules

将store拆分成几个不同模块；

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
// 定义不同的module
const moduleA = {
  state: { a: 'modules测试'},
}
const store = new Vuex.Store({
  modules: {
    a: moduleA
  }
})

//直接使用
this.$store.state.moduleA.a // 可以得到'modules测试'
// 按需使用
import { mapState } from 'vuex'
computed: {
  ...mapState({
    A:  state => state.moduleA.a,
    B:  state => state.moduleB.a,
  })
}

// 在modules中添加属性，单独的命名空间
// 否者直接触发方法，如：this.$store.commit('a')
namespaced: true,
// 调用
this.$store.commit('moduleA/a')
methods: {
  ...mapMutations({
    A:  commit => commit('moduleA/a'),
    B:  commit => commit('moduleB/b'),
  })
},
// 单个调用
methods: {
  ...mapMutations('moduleA',['a'])
}

// 使用mapAcitons
methods: {
  ...mapAcitons({
    A:  dispatch => dispatch('moduleA/a'),
  })
}

// 使用mapGetters
...mapGetters({
  A: 'moduleA/a'
})
1
2
3
4
// 展开运算符
var arr = [1, 2, 3, 4, 5]
arr = [0, ...arr, 6]
console.log(arr)