父组件与子组件
父组件中:
1: script中引用子组件
2:模版中使用注册子组件
<template>
<new-add-dialog v-if=“addDialogVisible” @close=“searchClose”></new-add-dialog>
</template>
<script>
import newAddDialog from './components/newAddDialog'
export default {
methods:{
search(){},
searchClose(){
this.addDialogVisible = false
this.search()
},
data(){
return{
addDialogVisible: false,
}
},
}
}
</script>
子组件中:
1:子组件要在props中创建一个属性,用来接受父组件传过来的参数
2:在子组件标签中添加子组件props中创建的属性
3:把需要传给子组件的值赋给该属性
<script>
export default {
methods:{
},
data(){
return{
}
},
props:['addDialogVisible'],
}
</script>
vue中不建议子组件直接改变父组件中的状态,可以通过调用父组件中方法来解决
父组件中:
<template>
<new-add-dialog v-if=“addDialogVisible” @close=“searchClose”></new-add-dialog>
</template>
<script>
export default {
methods:{
search(){},
searchClose(){
this.addDialogVisible = false
this.search()
},
}
}
</script>
子组件中:
<template>
<el-button type=‘primary’ @click = ‘add’>增加</el-button>
</template>
<script>
export default {
methods:{
add(){
this.$emit('close')
}
}
}
</script>
@close在父组件中,可供子组件调用,‘=’后面是函数或者函数表达式,下面两种写法功能相同
<template>
<el-button type=‘primary’ @close="editDialogVisible = false">增加</el-button>
</template>
<template>
<el-button type=‘primary’ @close="func">增加</el-button>
</template>
<script>
export default {
methods:{
func(){
this.editDialogVisible = false
}
}
}
</script>
在发送请求时,在params中参数写法(this后为v-model中绑定的参数,这些参数要先在data中声明)
返回值放在表格绑定的data中 :data="tableData"要在data中return中定义
request
.send(apiUrl, parameter)
.then(res => {
this.tableLoading = true
this.tableData = res.data
})
.catch(err => {
console.log(err)
})
{
parameter[item]:this.object.item,
}