Vue3-子组件调用父组件的方法、父组件给子组件传值，defineEmits、defineProps

一、认识一下

defineProps 和 defineEmits 都是只能在 <script setup>中使用的编译器宏。他们不需要导入，且会随着 <script setup>的处理过程一同被编译掉。

在子组件中的基本使用方式如下：

<script setup>
const props = defineProps({
  foo: String
})

const emit = defineEmits(['change', 'delete'])
// setup 代码
</script>

二、子组件调用父组件的方法 defineEmit

-----父组件代码👇-----

<template>
// 省略了一些无关紧要的代码
// 调用了子组件<server-select>
	<div>
		<server-select v-model:value="servers" @servers-updaded="onSearch" />
	</div>
</template>

<script lang="ts" setup>
// 省略了一些无关紧要的代码

const servers = ref()

// <server-select>组件中使用的一个方法
const onSearch = () => {
	search.p = 1
	refresh()
}
</script>

-----子组件代码👇-----

<template>
	<n-select
		v-model:value="sids"
		:multiple="true"
		:options="options"
		placeholder="请选择主机"
		@update:value="handleChange">
	</n-select>
</template>

<script lang="ts" setup>

const sid = ref()

// 接收父组件传的方法
const emit = defineEmits<{
	(event: 'serversUpdated'): void
}>()

// 重新声明一个 handleChange 方法，调用父组件的方法
const handleChange = () => {
	emit('serversUpdated')
}

</script>

三、父组件给子组件传值 defineProps

-----父组件代码👇-----

<template>
// 省略了一些无关紧要的代码
// 调用了子组件<server-select>
	<div>
		<server-select v-model:value="servers" :servers="sids" />
	</div>
</template>

<script lang="ts" setup>

const servers = ref()

// 要把这个变量传给子组件
const sids = ref('12')

</script>

-----子组件代码👇-----

<template>
// 绑定了父组件传过来的值
	<n-select
		v-model:value="$props.sids"
		:multiple="true"
		:options="options"
		placeholder="请选择主机">
	</n-select>
</template>

<script lang="ts" setup>

/* import { useVModel } from '@vueuse/core'

interface Props {
	value: string[]
	setDefault?: boolean // 是否设置默认值
	alarm: boolean
}

const props = withDefaults(defineProps<Props>(), {
	setDefault: false,
	alarm: false,
})

const method = useVModel(props, 'value')
*/

// 声明一个props变量接受父组件传的变量
const props = defineProps({
  sids: String
})

</script>

以上o(￣▽￣)ブ