vue3 组建传值

Vue3组件传值

defineProps,和defineEmites

defineProps 等同与vue2 的props
 

defineProps({
xxx:{
	type:类型,
	default:xxx
}
})

defineEmites

const emit = defineEmites(["xxx"])
// 触发事件
const btn = () => {
	emit("xxx",需要传的值)
}

1、父传子

父组件

//通过动态绑定的方式
 <template>
 	<div>
		<button>父组件</button>
		<Child :sex="sex" @FatherMethod"></Child>
	</div>
<template>

<script setup lang="ts">
//引入子组件
import Child from './child.vue';
import { ref } from "vue";
const sex = ref('male');
const FatherMethod = () => {
	console.log('嗨嗨嗨，我是父组件');
};
</script>

子组件

<template>
  <div>
    <button @click="ChildMethod">子组件</button>
  </div>
</template>
<script setup lang="ts">
//子组件接收
const props = defineProps(["sex"])
const ChildSex = props.sex;
//子组件中自定义事件
const emits = defineEmits(["FatherMethod"]);
const ChildMethod = () => {
	emits("FatherMethod");
};
</script>

2、子传父

父组件

 <template>
 	<div>
		<button @click="FatherMethod">父组件</button>
		<Child ref="Childs">{{sex}}</Child>
	</div>
<template>

<script setup lang="ts">
//引入子组件
import Child from './child.vue';
import { ref } from "vue";
//声明子组件
const Childs: any = ref(null);
const FatherMethod = () => {
	//子组件.value.方法
	Childs.value.ChildMethod();
};
</script>

子组件

<template>
  <div>
    <button>子组件</button>
  </div>
</template>
<script setup lang="ts">
//子组件中定义事件第一种方法
const emits = defineEmits(["sex"]);
//子组件中定义事件第一种方法
function height() {
	//第一个参数是提交的变量名，后面是参数
	emit('height', 192);
};
//子组件的方法
const ChildMethod = () => {
	console.log('嗨害嗨，我是子组件');
};
//暴露出去
defineExpose({
	ChildMethod
})
</script>