执行顺序如下：
父组件 created
子组件 created
子组件 mounted
父组件 mounted
如果有多个子组件：
父组件created钩子结束后，依次执行子组件的created钩子
多个子组件的created执行顺序为父组件内子组件DOM顺序
多个子组件的mounted顺序无法保证，跟子组件本身复杂程度有关
父组件一定在所有子组件结束mounted钩子之后，才会进入mounted钩子
问题解决方案：
1.用watch监视props属性，将newdata赋值进data中
2.在一个工程里，子组件总最好不要写过多逻辑和对传入数据的处理
子组件
<template>
<!--分配客户弹窗 start-->
<div class="actionModel" v-show="showModel">
<div class="addResourcesModel">
<div class="titleAndSearch">
<span class="title">分配到客服</span>
<el-input
class="search"
placeholder="快速查找"
prefix-icon="el-icon-search"
v-model="keyword"
@input="setVal"
></el-input>
</div>
<div class="optionalList" style="overflow: auto">
<div
class="optionalItem"
v-for="item in listData"
:key="item.id"
@click="checkUser(parseInt(item.id))"
>
<img
class="icon"
:src="
parseInt(item.id) === checkedUsers
? 'https://webimg.fmapp.com/Public/web/img/webapp/fm2021/uplaod_selected.png'
: 'https://webimg.fmapp.com/Public/web/img/webapp/fm2021/uplaod_unselect.png'
"
/>
<div class="optionalItemCon">
<img class="left" :src="item.avatar" />
<div class="right">
{{ item.username }}
</div>
</div>
</div>
</div>
<div class="btns">
<span class="sure" @click="handleAllocation()">确定</span>
<span class="cancel" @click="closeModel()">取消</span>
</div>
</div>
</div>
<!-- 分配客户弹窗 end -->
</template>
<script>
export default {
name: 'AllocationModel',
data () {
return {
checkedUsers: 0,
keyword: ''
}
},
watch: {
selectId (newVal) {
this.checkedUsers = newVal // 对父组件传过来的值进行监听，如果改变也对子组件内部的值进行改变
}
},
props: {
selectId: Number,
listData: Array,
showModel: Boolean
},
methods: {
setVal () {
this.$emit('setVal', this.keyword)
},
closeModel () {
this.$emit('closeModel')
},
handleAllocation () {
this.$emit('handleAllocation', this.checkedUsers)
},
checkUser (id) {
this.checkedUsers = id
}
}
}
</script>
父组件（页面）：
<template>
<div class="orangeCatPlanetPage">
<div class="item" v-for="list in lists" :key="list.id">
<div class="userInfo">
<img class="avatar" :src="list.logo" />
<div class="content">
<span class="classname">{{ list.username }}</span>
<span class="size-tag">{{ list.reg_time }}</span>
</div>
</div>
<div class="itemBox">
<span class="key">短视频</span>
<span class="val">{{ list.video_num }}</span>
</div>
<div class="itemBox">
<span class="key">图文贴</span>
<span class="val">{{ list.tw_num }}</span>
</div>
<div class="itemBox">
<span class="key">资源贴</span>
<span class="val">{{ list.zy_num }}</span>
</div>
<div class="itemBox">
<span class="key">客服归属</span>
<span class="val" v-if="parseInt(list.admin_user_id) > 0">{{
list.admin_user_name
}}</span>
<span
class="skyblue"
v-else
@click="openModel(list.customer_user_id)"
>未分配</span
>
</div>
<div class="itemBox">
<span class="key">最近发布时间</span>
<span class="val time">{{ list.last_add_time }}</span>
</div>
<div class="col3">
<span
class="deal"
@click="
openModel(list.customer_user_id, parseInt(list.admin_user_id))
"
>重新分配归属</span
>
<span class="split"></span>
<span
class="deal"
@click="
lookContact(
list.customer_user_id,
list.username,
list.phone,
list.email
)
"
>查看联系方式</span
>
</div>
</div>
</div>
<div class="pagebox">
<el-pagination
@current-change="curChange"
layout="prev, pager, next"
:current-page="pg"
:page-size="25"
:total="total"
></el-pagination>
</div>
<!-- 各种list---E -->
<AllocationModel
@closeModel="(allocationModelFlag = false), (curUserID = 0)"
@setVal="setVal"
:selectId="checkedUsers"
:showModel="allocationModelFlag"
@handleAllocation="handleAllocation"
:listData="cslist"
></AllocationModel>
</div>
</template>
<script>
import Vue from 'vue'
import AllocationModel from '@/components/AllocationModel'
export default {
name: 'OrangeCatPlanet',
data () {
return {
lists: [],
checkedUsers: 0,
cspg: 1,
cskeyword: '',
cslist: [], // 客服列表
allocated: 0,
allocationModelFlag: false,
curUserID: 0
}
},
components: {
AllocationModel
},
created () {
},
methods: {
// 客服列表搜索
setVal (value) {
this.cskeyword = value
},
openModel (cuid, auid) {
this.curUserID = cuid
if (auid !== 0) {
console.log(auid, 'list.admin_user_id')
this.checkedUsers = auid
}
this.allocationModelFlag = true
this.getCslist()
},
// 获取客服列表
getCslist () {
this.$api.post(
'/admintp/getCustomList',
{
pg: this.cspg,
keyword: this.cskeyword
},
(res) => {
if (res.status) {
this.cslist = res.data
} else {
this.$notify.warning({
title: '错误',
message: res.msg
})
}
}
)
},
// 处理分配客服
handleAllocation (id) {
this.$api.post(
'/admintp/chioceCustomAdmin',
{ user_id: this.curUserID, custom_id: id },
(res) => {
if (res.status) {
this.$notify.success({
title: '提示',
message: res.msg
})
} else {
this.$notify.warning({
title: '错误',
message: res.msg
})
}
this.allocationModelFlag = false
this.curUserID = 0
this.getlists()
}
)
},
}
}
}
</script>
网友评论