引用类型数据
比如父组件里有一个参数
father.vue
data:{
obj:{
age:18
}
}
<div>
这里是父组件
<son :obj="obj"></son>
</div>
son.vue
props: ['obj'],
data(){
return {
// 子组件不能直接修改父组件传递过来的参数
value: this.obj
}
},
created(){
setTimeout(() => {
this.value.age = 81
}, 5000)
}
由于是引用类型,所以引用在内存里指向的是同一个,因此改变子组件的value,父组件也会改变.不建议使用
value: JSON.parse(JSON.stringify(this.obj))
对数据进行深复制,不影响父组件的数据
自定义事件
父组件向子组件传值 props down
father.vue
<div>
这里是父组件
<son :obj="obj" @change="changeAge"></son>
</div>
methods:{
changeAge(age){
this.obj.age = age
}
}
子组件通知父组件 events up
son.vue
props: ['obj'],
data(){
return {
// 子组件不能直接修改父组件传递过来的参数
value: JSON.parse(JSON.stringify(this.obj))
}
},
created(){
setTimeout(() => {
this.value.age = 81
this.$emit('change',81)
}, 5000)
}
子组件更改数据时触发change事件同时传参,父组件监听change事件接收参数
全局事件
新建一个事件中心bus.js
import Vue from 'vue'
const bus = new Vue({})
export default bus
father.vue
<div>
这里是父组件
<son :obj="obj"></son>
</div>
import bus from './bus.js'
created(){
bus.$on('change',(age)=>{
this.obj.age = age
})
}
son.vue
import bus from './bus.js'
props: ['obj'],
data(){
return {
// 子组件不能直接修改父组件传递过来的参数
value: JSON.parse(JSON.stringify(this.obj))
}
},
created(){
setTimeout(() => {
this.value.age = 81
bus.$emit('change',81)
}, 5000)
}
状态管理
安装vuex
npm install vuex | yarn add vuex
新建index.js文件
vuex与路由使用方法类似
// 使用vuex插件
import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)
// service.js是我项目中所有请求的封装
import service from 'js/service.js'
// 创建store实例
const store = new Vuex.Store({
state: {
lists: null
},
// 对数据同步管理
mutations:{
init(state,lists){
state.lists = lists
}
},
// 异步操作
actions: {
getAddressList({commit}){
// 获取地址请求
service.addressList().then(response=>{
// this.lists = response.data.lists
commit('init',response.data.lists)
})
}
}
})
export default store
状态管理中的数据(state)不允许直接修改
mutations: 对数据进行同步修改
actions: 异步操作后触发mutations内的事件, 从而改变数据
官网说明
Vuex 并不限制你的代码结构。但是,它规定了一些需要遵守的规则:
应用层级的状态应该集中到单个 store 对象中。
提交 mutation 是更改状态的唯一方法,并且这个过程是同步的。
异步逻辑都应该封装到 action 里面。
只要你遵守以上规则,如何组织代码随你便。如果你的 store 文件太大,只需将 action、mutation 和 getter 分割到单独的文件。
注入到根组件中
import store from './vuex/index.js'
// 挂载
new Vue({
el: '#app',
store
})
组件中就不用定义方法. 因为状态管理中的数据可能是变化的, 同时希望数据是响应式的, 所以通过计算属性来拿
created(){
this.$store.dispatch('getAddressList')
},
computed: {
lists(){
// $store 通过注入得到
return this.$store.state.lists
}
}
网友评论