vue.js-组件的基本使用方法

父组件与子组件
父组件中：
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,
}