vue中数据通信的方式
1.父传子， 通过属性传递。
2.子传父， 子父通信是通过emit来触发父级事件。
// 父组件
<template>
<child :name="name" :age="age"></child>
</template>
<script>
export default {
name: 'parent',
data(){
return {
name: '小明'，
age: 30
}
},
methods: {
childSay(message){
console.log('儿子说'，message);
}
}
}
</script>
// 子组件
<template>
<div>
<p>name: {{name}}</p>
<p>age: {{age}}</p>
<button @click="say()">儿子对父亲说</button>
</div>
</template>
<script>
export default {
name: 'child',
props: {
name: String,
age: {
type: Number,
default: 18
}say
}，
methods: {
say(){
this.$emit('say', `我叫${name},今年${age}岁`);
}
}
}
</script>
3.跨组件传播
如果遇到平级组件可以通过共同的父级进行数据传递。但是在开发中，我们经常会遇到平级组件数据交互和跨组件数据交互就可以通过一个共同的实例来进行数据传递。 通过事件来共享数据（发布订阅模式）
// main.js
let $bus = new Vue();
Vue.prototype.$bus = $bus;
// Boy组件 发射dinner事件
<template>
<div>男孩
<button @click="sayToGirl()">对女孩说话</button>
</div>
</template>
<script>
export default {
methods: {
sayToGirl(){
this.$bus.$emit('dinner','你饿吗');
}
}
}
</script>
// Girl组件 监听dinner事件
<template>
<div>
女孩 <span>男孩对我说： {{message}}</span>
</div>
</template>
<script>
export default {
data(){
return {message:''}
},
mounted() {
this.$bus.$on('dinner',(data)=>{
this.message = data;
})
}
}
</script>
4.vuex
vuex.png
import ticketService from '../../service/ticket.service';
const state = {
ticketList: [],
ticketProgressList: [],
ticketCompleteList: [],
ticketCancelList: [],
ticket: {},
isWorkday: false,
};
// getters
const getters = {
ticketList: state => state.ticketList.sort((a,b)=>a.ticketTime < b.ticketTime?1:-1),
ticketProgressList: state => state.ticketList.filter(item => item.rescueStatus === 1).sort((a,b)=>a.ticketTime < b.ticketTime?1:-1),
ticketCompleteList: state => state.ticketList.filter(item => item.rescueStatus === 2).sort((a,b)=>a.ticketTime < b.ticketTime?1:-1),
ticketCancelList: state => state.ticketList.filter(item => item.rescueStatus === 3).sort((a,b)=>a.ticketTime < b.ticketTime?1:-1),
ticket: state => state.ticket,
isWorkday: state => state.isWorkday,
};
const actions = {
async loadTicketList({
commit
}, args) {
const {
retBody,retCode
} = await ticketService.loadTicketList(args);
if(retCode === 1){
commit('SET_TICKET_LIST', retBody);
}
},
cancelTicket({
commit
}, args) {
const list = state.ticketList.map(item => {
if (item.ticketId === args) {
item.rescueStatus = 3;
}
return item;
});
commit('SET_TICKET_LIST', list);
},
cancelReservation({
commit
}, args) {
const ticket = state.ticket;
if (ticket.ticketId === args) {
ticket.rescueStatus = 3;
commit('CANCEL_TICKET', ticket);
}
},
async loadTicket({
commit
}, args) {
const {
retBody,retCode
} = await ticketService.loadTicket(args);
if(retCode === 1){
commit('SET_TICKET', retBody);
}
},
async checkWorkDay({
commit
}, args) {
const {
retCode
} = await ticketService.checkWorkDay(args);
commit('SET_ISWORKDAY', retCode === 1);
return retCode === 1;
},
}
// mutations
const mutations = {
SET_TICKET_LIST(state, payload) {
state.ticketList = payload;
},
SET_TICKET(state, payload) {
state.ticket = payload;
},
CANCEL_TICKET(state, payload) {
state.ticket = payload;
},
SET_ISWORKDAY(state, payload) {
state.isWorkday = payload;
},
}
export default {
namespaced: true,
state,
getters,
actions,
mutations
}
vuex调用
<script>
import { mapGetters, mapActions } from "vuex";
import { pageMixin } from "@/mixin";
export default {
name: "order",
mixins: [pageMixin],
data() {
return {
activeName: "all"
};
},
computed: {
...mapGetters("ticket", [
"ticketList",
"ticketProgressList",
"ticketCompleteList",
"ticketCancelList",
"ticket"
]),
...mapGetters('common',['query','serviceList']),
path(){
const service = this.serviceList.find(item=>item.code==this.query.equityType);
return service.router;
}
},
mounted() {
this.loadTicketList(this.query);
},
methods: {
...mapActions("ticket", [
"loadTicketList",
"loadTicket",
"checkWorkDay",
"getPhoneByMac"
]),
goDetails(ticketId) {
this.$router.push({ path: `/ticket/${this.path}`, query: { ticketId } });
},
}
};
</script>
vue 生命周期
new Vue();
beforeCreate: 在实例初始化之后，数据观测(data observer) 和 event/watcher 事件配置之前被调用。
created: 实例已经创建完成之后被调用。在这一步，实例已完成以下的配置：数据观测(data observer)，属性和方法的运算， watch/event 事件回调。这里没有$el;
beforeMount: 在挂载开始之前被调用：相关的 render 函数首次被调用。
mounted: el 被新创建的 vm.$el 替换，并挂载到实例上去之后调用该钩子。
beforeUpdate: 数据更新时调用，发生在虚拟 DOM 重新渲染和打补丁之前。
updated: 由于数据更改导致的虚拟 DOM 重新渲染和打补丁，在这之后会调用该钩子。
beforeDestroy: 实例销毁之前调用。在这一步，实例仍然完全可用。
destroyed: Vue 实例销毁后调用。调用后，Vue 实例指示的所有东西都会解绑定，所有的事件监听器会被移除，所有的子实例也会被销毁。 该钩子在服务器端渲染期间不被调用。
lifecycle.png
网友评论