一. 组件传参
1. 父子组件
-
父组件 ==> 子组件 通过在子组件自定义属性
props
,来接收参数实现传参<script> // 绑定边界 new Vue({ el: '#app', components: { 'my-button': { props: ['m'], template: '<button @click="do_sub">{{m}}提交{{n}}次</button>' data() { return { n: 0 } }, methods: { do_sub() { this.n++; } } } }, data() { return { } } }) </script>
-
子组件 ==> 父组件 通过在子组件中自定义事件
this.$emit('事件名', 参数1,参数2);
实现传参<div id="app"> <my-button m='zs' @three-click='do_three'></my-button> <my-button m='王五' @four-click='do_four'></my-button> </div> <script> // 绑定边界 new Vue({ el: '#app', components: { 'my-button': { props: ['m'], template: '<button @click="do_sub">{{m}}提交{{n}}次</button>', data() { return { n: 0 } }, methods: { do_sub() { this.n++; var name = 'ww'; var sex = '男'; var hobby = '小姐姐'; // 通过自定义事件来完成 if (this.n % 3 == 0) this.$emit('three-click', name, sex, hobby); if (this.n % 4 == 0) this.$emit('four-click', name, hobby); } } } }, methods: { do_three(a, b, c) { console.log(a, b, c); }, do_four(a, b, c) { console.log(a, b, c); } }, data() { return { } } }) </script>
2. 总线
- 在main.js的Vue实例中添加一个Vue作为总线
- 在总线中自定义事件
this.$root.BUS.$emit('doCollapsed', this.collapsed);
- 通过对事件的监听取得参数
this.$root.BUS.$on('doCollapsed', v => { // v 指的是TopNav传递过来的 this.collapsed = v; })
二. Vuex
1. 介绍
Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。可以想象为一个“前端数据库”(数据仓库),让其在各个页面上实现数据的共享包括状态,并且可操作
2. Vuex中的4个js
- state 用于集中管理整个Vue项目中的所有变量
- getters 操作变量,相当于get方法
- mutations 操作变量,相当于set方法
- actions mustations的升级版.mustations操作变量,是同步操作,action是异步操作
3. Vuex的使用
-
Vuex安装
- npm install vuex -S
- npm i -S vuex@3.6.2
-
在src目录下创建store模块
创建actions.js,getters.js,mutations .js,state .js,index.js
其中index.js负责新建Vuex的store实例,注册并引入以上各大模块import Vue from 'vue' import Vuex from 'vuex' import state from './state' import getters from './getters' import actions from './actions' import mutations from './mutations' Vue.use(Vuex) const store = new Vuex.Store({ state, getters, actions, mutations }) export default store
-
在main.js中导入并引用到Vue实例中
import store from './store' new Vue({ el: '#app', data() { return { BUS: new Vue({}) } }, router, store, components: { App }, template: '<App/>' })
4. Vuex的取值
-
直接取值
- 在state中定义
export default{ str: 'hello' }
- 取值
this.$store.state.str;
- 数据显示
<h1>直接取值==>{{msg}}</h1>
- 效果
- 在state中定义
-
getters取值
- 在state中定义
export default{ str: 'hello' }
- 在getters中定义方法
export default{ getStr: function(state) { return state.str; } }
- 数据显示
<h1>getters取值==>{{msg2}}</h1>
- 取值
this.$store.getters.getStr;
- 效果
- 在state中定义
-
mutations改变值
- 在state中定义
export default{ str: 'hello' }
- 在mutations中定义方法
export default{ setName: function(state, payload) { // playload 载荷 state.str = playload.str; } }
- 定义按钮绑定事件来更改str的值
doSub() { this.$store.commit('setName', { str: '你好' }) }
- 按钮
<button @click="doSub">mutations改变值</button>
- 效果
- 在state中定义
-
actions改变值
- 在state中定义
export default{ str: 'hello' }
- 在actions中定义方法
export default{ setStrAsync: function(context, payload) { // context 值得是vuex的实例 // 等价于 this.$store setTimeout(function() { context.commit('setName', payload); }, 6000); } }
- 定义按钮绑定事件来更改str的值
doSub2() { this.$store.dispatch('setStrAsync', { str: '欢迎' }) }
- 按钮
<button @click="doSub2">actions改变值</button>
- 效果
- 在state中定义
-
mutations和actions
更改mutations中的方法export default{ setName: function(state, payload) { // playload 载荷 setTimeout(function() { state.str = payload.str; }, 6000); } }
之后
先点击mutations后点击actions会在mutations中的方法执行完后在执行actions中的方法
先点击actions后点击mutations会在actions中的方法执行过程中执行mutations中的方法直到执行完成在继续执行actions中的方法 -
actions中发送ajax获取后台数据
-
在actions中定义方法
setStrAjax: function(context, payload) { let _this = payload._this; let url = _this.axios.urls.VUEX_INFO; let params = { resturantName: 'hello' } _this.axios.get(url, {params: params}).then(e => { if (e.data.success) { context.commit('setStr', { str: e.data.msg }) } }).catch(err => { console.log(err) }) }
-
定义按钮绑定事件
传入参数时将this传入doSub3() { this.$store.dispatch('setStrAjax', { _this: this }) }
-
按钮
<button @click="doSub3">actions发送ajax改变值</button>
-