在
Vue 3中，
父组件向子组件传值主要通过属性绑定的方式实现，以下为详细介绍：
### 基本属性绑定传值
在
父组件中，使用属性绑定向子组件传递数据。例如，
父组件代码如下：
```
vue
<template>
<div class="parent">
<h1>我是
父组件</h1>
<!-- 使用属性绑定传递数据 -->
<Child
Vue :titles="title" :contents="content" />
</div>
</template>
<script setup>
import { ref } from &#
39;
vue&#
39;;
import Child
Vue from &#
39;
./Child
Vue.vue&#
39;;
// 定义
父组件的数据
const title = ref(&#
39;
父组件的标题&#
39;);
const content = ref(&#
39;
父组件传过来的内容&#
39;);
</script>
<style scoped>
.parent {
width: 500px;
height: 500px;
background: rgb(146, 1
33, 1
33);
}
</style>
```
在上述代码中，`:titles="title"` 和 `:contents="content"` 是将
父组件的 `title` 和 `content` 属性值传递到子组件所绑定的 `titles` 和 `contents` 属性中。
子组件接收数据，代码如下：
```
vue
<template>
<div class="child">
<h2>{{ titles }}</h2>
<p>{{ contents }}</p>
</div>
</template>
<script setup>
import { defineProps } from &#
39;
vue&#
39;;
// 定义接收的属性
const props = defineProps({
titles: String,
contents: String
});
</script>
<style scoped>
.child {
width:
300px;
height:
300px;
background: rgb(200, 200, 200);
}
</style>
```
这里使用 `defineProps` 来定义子组件接收的属性，子组件就可以使用这些属性的值了。
### 动态传值与默认值
可以给 `defineProps` 中的属性设置默认值。例如，子组件代码如下：
```
vue
<template>
<div class="child">
<h2>{{ titles }}</h2>
<p>{{ contents }}</p>
</div>
</template>
<script setup>
import { defineProps } from &#
39;
vue&#
39;;
// 定义接收的属性，并设置默认值
const props = defineProps({
titles: {
type: String,
default: &#
39;默认标题&#
39;
},
contents: {
type: String,
default: &#
39;默认内容&#
39;
}
});
</script>
<style scoped>
.child {
width:
300px;
height:
300px;
background: rgb(200, 200, 200);
}
</style>
```
当
父组件没有传递相应的值时，子组件会使用默认值。
### 通过 `ref` 调用子组件方法并传值
在
父组件中，可以通过 `ref` 调用子组件的方法并动态传参。例如：
```
vue
<template>
<div class="parent">
<h1>我是
父组件</h1>
<!-- 给子组件定义 ref -->
<Child
Vue ref="child" />
<button @click="invokeChildMethod">调用子组件方法</button>
</div>
</template>
<script setup>
import { ref } from &#
39;
vue&#
39;;
import Child
Vue from &#
39;
./Child
Vue.vue&#
39;;
// 定义子组件的 ref
const child = ref(null);
// 调用子组件方法，动态传参
const invokeChildMethod = () => {
child
.value?
.printAge(12);
};
</script>
<style scoped>
.parent {
width: 500px;
height: 500px;
background: rgb(146, 1
33, 1
33);
}
</style>
```
子组件代码如下：
```
vue
<template>
<div class="child">
<h2>我是子组件</h2>
</div>
</template>
<script setup>
import { defineExpose } from &#
39;
vue&#
39;;
// 定义子组件方法
const printAge = (age) => {
console
.log(`年龄是：${age}`);
};
// 暴露方法给
父组件调用
defineExpose({
printAge
});
</script>
<style scoped>
.child {
width:
300px;
height:
300px;
background: rgb(200, 200, 200);
}
</style>
```
在这个例子中，
父组件通过 `ref` 调用子组件的 `printAge` 方法，并传递了参数 `12`。
### 总结
Vue 3 中
父组件向子组件传值主要通过属性绑定和 `ref` 调用子组件方法的方式实现。属性绑定可以传递数据，而 `ref` 可以调用子组件的方法并传参。同时，子组件可以使用 `defineProps` 来接收和处理
父组件传递的数据，还可以设置默认值。
Vue父子页面传值与接收
扫一扫
3802
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
