Vue.js
求问子组件绑定数据时遇到这样的坑，是什么原因导致的？
粉丝福利 : 关注VUE中文社区公众号，回复视频领取粉丝福利
<template>
<el-tabs v-model="activeName">
<el-tab-pane label="用户管理" name="one">
<usertable :users="groups" @toFresh="freshUsers"></usertable>
</el-tab-pane>
<el-tab-pane label="用户组管理" name="two">
<grouptable :groups="users" @toFresh="freshGroups"></grouptable>
</el-tab-pane>
</el-tabs>
</template>
<script>
export default {
data() {
return {
activeName: 'one',
users: [],
groups: [],
};
},
components:{
usertable: {
props:{
users: Array
},
methods:{
toFresh(){
this.$emit('toFresh')
},
},
template: `
用户管理
<el-button @click="toFresh()"> 刷 新</el-button> <el-table :data="users"> <el-table-column
prop="name"
label="姓名">
</el-table-column>
</el-table>
</div>
`
},
grouptable: {
props:{
groups: Array
},
methods:{
toFresh(){
this.$emit('toFresh')
},
},
template: `
<div>
<h3>用户管理</h3>
<el-button @click="toFresh()"> 刷 新</el-button>
<el-table :data="groups">
<el-table-column
prop="name"
label="组名"
width="100">
</el-table-column>
</el-table>
</div>
`,
}
},
created(){
this.freshGroups()
this.freshUsers()
},
methods: {
freshUsers(){
this.groups = [{name:'groups'}]
},
freshGroups(){
this.users = [{name:'users'}]
},
freshAll(){
this.groups = [{name:'groups'}]
this.users = [{name:'users'}]
}
}
}; </script>
