Vue3 中子父组件之间的通信
一、父组件传递参数到子组件 采用defineProps
传递属性
父组件:
<template>
<div>
<h1>这是父组件</h1>
<h1>父组件像子组件传递参数</h1>
<h2>传递属性值</h2>
<HH :fatherMessage="fatherMessage" :valNum="valNum" :valBool="valBool" />
</div>
</template>
<script setup>
import { ref } from "vue";
import HH from "@/components/HelloWorld";
//定义参数进行传递到子组件
let fatherMessage = ref("大头"); //字符
let valNum = ref(1); //数字
let valBool = ref(true); //布尔类型
</script>
<style>
</style>
子组件:
<template>
<div>
<h1>这是子组件</h1>
<h2>属性值接收区</h2>
<div style="margin: 5px; border: 2px solid gold">
父组件传值接收区：字符型：{{ fatherMessage }}，数字类型：{{
valNum
}}，布尔类型:{{ valBool }}
</div>
</div>
</template>
<script setup>
import { defineProps, defineEmits } from "vue";
//使用defineProps接收父组件传递的参数
defineProps({
fatherMessage: {
type: String,
},
valNum: {
type: Number,
},
valBool: {
type: Boolean,
},
});
</script>
传递对象或者数组
父组件:
<template>
<div>
<h1>这是父组件</h1>
<h1>父组件像子组件传递参数</h1>
<h2>传递属性值</h2>
<HH
:fatherMessage="fatherMessage"
:valNum="valNum"
:valBool="valBool"
:testprop="testprop"
:testprops="testpropLlist"
/>
</div>
</template>
<script setup>
import { ref, reactive } from "vue";
import HH from "@/components/HelloWorld";
let fatherMessage = ref("大头"); //字符
let valNum = ref(1); //数字
let valBool = ref(true); //布尔类型
//定义数组
const propsList = [
{ name: "李四", Id: 1 },
{ name: "张三", Id: 2 },
{ name: "王麻子", Id: 3 },
];
//定义对象
const myObj = reactive({
name: "zs",
age: 20,
});
let testprop = ref(myObj);
let testpropLlist = ref(propsList);
</script>
<style>
</style>
子组件:
<template>
<div>
<h1>这是子组件</h1>
<h2>属性值接收区</h2>
<div style="margin: 5px; border: 2px solid gold">
父组件传值接收区：字符型：{{ props.fatherMessage }}，数字类型：{{
props.valNum
}}，布尔类型:{{ props.valBool }}
</div>
<h2>对象/数组接收区</h2>
<div style="margin: 5px; border: 2px solid rgb(77, 52, 219)">
父组件传值接收区： 对象接收:{{ props.testprop }},数组接收:{{
props.testprops
}},数组单个值:{{ vvv }}} ,循环数组的值:
<ul>
<li v-for="item in props.testprops" :key="item.Id">
{{ item.name }}
</li>
</ul>
</div>
</div>
</template>
<script setup>
import { defineProps, defineEmits, toRefs } from "vue";
const props = defineProps({
fatherMessage: {
type: String,
},
valNum: {
type: Number,
},
valBool: {
type: Boolean,
},
//接收对象 对象如果要使用某个值的时候 需要用 const vvv = toRefs(props.testprop).name
testprop: {
type: Object,
},
//接收数组
testprops: {
type: Array,
default: () => [],
},
});
//获取数组中某一个值
const vvv = toRefs(props.testprops[0]).name;
</script>
二、子组件向父组件传递事件 采用defineEmits
父组件:
<template>
<div>
<h1>这是父组件</h1>
<h2>事件传递</h2>
<HH @add="eat" />
<div style="margin: 5px; border: 2px solid gold">
子组件传值接收区： 变化数量:{{ num }}
</div>
<HH @getvale="getstr" />
<div style="margin: 5px; border: 2px solid rgb(26, 255, 186)">
子组件传值接收区： 参数内容获取:{{ valstr }}
</div>
</div>
</template>
<script setup>
import { ref } from "vue";
import HH from "@/components/HelloWorld";
//事件传递
let valstr = ref();//接收内容
let num = ref(0);//数字加减
//触发加减事件
const eat = (value) => {
num.value += value;
};
//通过子组件的事件向父组件传递参数
const getstr = (value) => {
valstr.value = value;
};
</script>
<style>
</style>
子组件:
<template>
<div>
<h1>这是子组件</h1>
<h2>自定义事件传递，子组件向父组件进行传递</h2>
<button @click="meat">点击我</button>
<button @click="getstr">点击我传递参数</button>
</div>
</template>
<script setup>
import { defineProps, defineEmits } from "vue";
const emit = defineEmits(["add"], ["getvale"]); // 自定义事件，可以自定义多个事件
const meat = () => {
// 触发自定义事件
emit("add", 1);
};
const getstr = () => {
emit("getvale", "子组件传过来的值");//第一个参数为事件名称，第二个参数为参数数据
};
</script>