Vue3.0组合式API：使用defineProps()实现父组件向子组件传递数据

pan_junbiao

已于 2024-09-19 17:14:25 修改

阅读量1.6k

点赞数 13

分类专栏： Vue 我の原创文章标签： vue.js 前端 javascript

于 2024-09-18 16:24:49 首次发布

本文链接：https://blog.csdn.net/pan_junbiao/article/details/142334465

版权

我の原创同时被 2 个专栏收录

530 篇文章 28 订阅

订阅专栏

Vue

37 篇文章 0 订阅

订阅专栏

Vue3.0组合式API系列文章：

《Vue3.0组合式API：setup()函数》

《Vue3.0组合式API：使用reactive()、ref()创建响应式代理对象》

《Vue3.0组合式API：computed计算属性、watch监听器、watchEffect高级监听器》

《Vue3.0组合式API：使用defineProps()实现父组件向子组件传递数据》

《Vue3.0组合式API：使用defineEmits()实现子组件向父组件传递数据》

《Vue3.0组合式API：生命周期钩子函数》

《Vue3.0组合式API：依赖注入provide和inject实现跨层组件的通信》

《Vue3.0组合式API：使用ref获取DOM元素》

1、使用 setup() 函数的参数

Vue 3.0 中新增了组合式 API 的功能，setup() 函数是一个新的组件选项，它是组件内部使用组合式 API 的入口。setup() 函数在组件实例创建之前，初始化 Prop 之后调用。setup() 函数可以接收两个可选的参数。第一个参数是响应式的 props 对象，第二个参数是一个上下文（context）对象。那么项目就可以使用 setup() 函数的第一个参数（响应式的 props 对象）来获取父组件向子组件传递数据。

注意事项：

（1）Prop 传递数据，只能从父组件向子组件传递，不能反其道而行。

（2）子组件接收到 Prop 传递的数据是只读的，不能对其进行修改操作。

【实例】使用 setup() 函数的第一个参数（响应式的 props 对象）来获取父组件向子组件传递数据。

（1）创建 ParentComponent.vue 父组件

<template>
    <fieldset>
        <legend>父组件</legend>
        <h3>使用Prop实现父组件向子组件传递数据</h3>
        <!-- 第三步：使用组件，并向子组件传递数据 -->
        <ChildComponent :blogName="blogInfo.blogName" :blogUrl="blogInfo.blogUrl" />
    </fieldset>
</template>
 
<script>
import { reactive } from 'vue';
 
//第一步：引用组件
import ChildComponent from '@/components/ChildComponent.vue'
 
export default {
    //第二步：注册组件
    components: {
        ChildComponent,
    },
    setup() {
        // 使用 reactive 创建响应式的对象
        const blogInfo = reactive({
            blogName: '您好，欢迎访问 pan_junbiao的博客',
            blogUrl: 'https://blog.csdn.net/pan_junbiao'
        });
 
        //返回
        return {
            blogInfo
        }
    }
}
</script>

（2）创建 ChildComponent.vue 子组件

<template>
    <fieldset>
        <legend>子组件</legend>
        <p>博客信息：{{ props.blogName }}</p>
        <p>博客地址：{{ props.blogUrl }}</p>
    </fieldset>
</template>
 
<script>
export default {
    // 使用 props 属性：接收父组件传递过来的数据
    props: ['blogName', 'blogUrl'],
 
    //setup()函数的第一个参数是响应式的 props 对象。
    setup(props) {
        return {
            props
        };
    }
}
</script>
 
<style scoped>
fieldset {
    font-size: 18px;
    color: blue;
}
</style>

（3）在 App.vue 根组件中，引入父组件

<template>
  <!-- 第三步：使用组件 -->
  <ParentComponent />
</template>
 
<script>
//第一步：引用组件
import ParentComponent from '@/components/ParentComponent.vue'
 
export default {
  //第二步：注册组件
  components: {
    ParentComponent,
  }
}
</script>

执行结果：

2、使用 defineProps() 函数

使用 <script setup> 语法糖，<script setup> 是在单文件组件 (SFC) 中使用组合式 API 的编译时语法糖。在 Vue3.2 中只需要在 script 标签上加上 setup 属性，无需 return，template 便可直接使用。相比于普通的 <script> 语法，它具有更多优势。

Vue3.0组合式API，组件之间的数据传递：

父传子：使用 defineProps() 函数。

子传父：使用 defineEmits() 函数。

为了在声明 props 和 emits 选项时获得完整的类型推导支持，我们可以使用 defineProps() 函数和 defineEmits() 函数 API，它们将自动地在 <script setup> 中可用：

<script setup>
//父传子
const props = defineProps({
  foo: String
})

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

defineProps() 函数和 defineEmits() 函数都是只能在 <script setup> 中使用的编译器宏。他们不需要导入，且会随着 <script setup> 的处理过程一同被编译掉。
defineProps() 函数接收与 props 选项相同的值，defineEmits() 函数接收与 emits 选项相同的值。
defineProps() 函数和 defineEmits() 函数在选项传入后，会提供恰当的类型推导。
传入到 defineProps() 函数和 defineEmits() 函数的选项会从 setup 中提升到模块的作用域。因此，传入的选项不能引用在 setup 作用域中声明的局部变量。这样做会引起编译错误。但是，它可以引用导入的绑定，因为它们也在模块作用域内。

【实例】在 <script setup> 语法糖中，使用 defineProps() 函数，实现父组件向子组件传递数据。

（1）创建 ParentComponent.vue 父组件

<template>
    <fieldset>
        <legend>父组件</legend>
        <h3>使用Prop实现父组件向子组件传递数据</h3>
        <!-- 使用组件，并向子组件传递数据 -->
        <ChildComponent :blogName="blogInfo.blogName" :blogUrl="blogInfo.blogUrl" />
    </fieldset>
</template>

<!-- 使用 <script setup> 语法糖 -->
<script setup>
import { reactive } from 'vue';

//导入组件，使用 <script setup> 语法糖，导入的组件将会自动执行注册
import ChildComponent from '@/components/ChildComponent.vue';

// 使用 reactive 创建响应式的对象
const blogInfo = reactive({
    blogName: '您好，欢迎访问 pan_junbiao的博客',
    blogUrl: 'https://blog.csdn.net/pan_junbiao'
});
</script>

（2）创建 ChildComponent.vue 子组件

<template>
    <fieldset>
        <legend>子组件</legend>
        <p>博客信息：{{ props.blogName }}</p>
        <p>博客地址：{{ props.blogUrl }}</p>
    </fieldset>
</template>

<!-- 使用 <script setup> 语法糖 -->
<script setup>
// 使用 defineProps() 函数，接收父组件传递的数据
const props = defineProps({
    blogName: String,
    blogUrl: String
});
</script>

<style scoped>
fieldset {
    font-size: 18px;
    color: blue;
}
</style>

（3）在 App.vue 根组件中，引入父组件

<template>
  <!-- 使用组件 -->
  <ParentComponent />
</template>
 
<script setup>
//导入组件，使用 <script setup> 语法糖，导入的组件将会自动执行注册
import ParentComponent from '@/components/ParentComponent.vue';

</script>

执行结果：

3、Prop 数据验证

组件可以为 Prop 指定验证要求。当开发一个可以被他人使用的组件时，验证可以让使用者更加准确地使用组件。使用验证的时候，Prop 接收的参数是一个对象，而不是一个字符串数组。例如，props : { age : Number}，表示验证参数 age 须为 Number 类型，如果调用该组件时传入的 age 为 Number 以外的类型，则会在浏览器的控制台提示异常信息。

Vue.js 提供的 Prop 验证方式有多种，下面分别进行介绍。

（1）基础类型验证：允许参数为指定的一种类型。

props : {
    userName : String
}

（2）多种类型：允许参数为多种类型之一。

props : {
    tel : [Number, String]
}

（3）参数必须：参数必须有值且为指定的类型。

props : {
    userName : {
         type : String,
         required : true
    }
}

（4）参数默认：参数具有默认值。

props : {
    sex : {
         type : String,
         default : '男'
    }
}

（5）如果参数类型为数组或对象，则其默认值需要通过函数返回值的形式获取。

props: {
    //验证是否为数组类型且有默认值
    interest: {
        type: Array,
        default: function () {
            return ['游泳', '篮球', '羽毛球', '跑步']
        }
    },
    //验证是否为对象类型且有默认值
    blogInfo: {
        type: Object,
        default: function () {
            return {
                blogName: '您好，欢迎访问 pan_junbiao的博客',
                blogUrl: 'https://blog.csdn.net/pan_junbiao'
            }
        }
    }
}

（6）自定义验证函数：根据验证函数验证参数是否符合要求。

props: {
    //验证是否为数值且值必须大于等于18
    age: {
        type: Number,
        validator: function (value) {
            return value >= 18
        }
    }
}

【实例】对父组件中传递的数据进行 Prop 验证。

（1）创建 ParentComponent.vue 父组件

<template>
    <fieldset>
        <legend>父组件</legend>
        <h3>使用Prop实现父组件向子组件传递数据</h3>
        <!-- 使用组件，并向子组件传递数据：字符串、数字、数组、对象 -->
        <ChildComponent :userName="blogInfo.userName" :age="blogInfo.age" :interest="blogInfo.interest" :blogInfo="blogInfo.blogInfo" />
    </fieldset>
</template>

<!-- 使用 <script setup> 语法糖 -->
<script setup>
import { reactive } from 'vue';

//导入组件，使用 <script setup> 语法糖，导入的组件将会自动执行注册
import ChildComponent from '@/components/ChildComponent.vue';

// 使用 reactive 创建响应式的对象
const blogInfo = reactive({
    // 数据类型：字符串、数字
    userName: 'pan_junbiao的博客',
    age: 36,
    // 数据类型：数组
    interest: ['游泳', '篮球', '羽毛球', '跑步'],
    // 数据类型：对象
    blogInfo: {
        blogName: '您好，欢迎访问 pan_junbiao的博客',
        blogUrl: 'https://blog.csdn.net/pan_junbiao'
    }
});
</script>

（2）创建 ChildComponent.vue 子组件，并对父组件中传递的数据进行 Prop 验证

<template>
    <fieldset>
        <legend>子组件</legend>
        <p>用户姓名：{{ props.userName }}</p>
        <p>用户性别：{{ props.sex }}</p>
        <p>用户年龄：{{ props.age }}</p>
        <p>兴趣爱好：{{ props.interest.join('；') }}</p>
        <p>博客信息：{{ props.blogInfo.blogName }}</p>
        <p>博客地址：{{ props.blogInfo.blogUrl }}</p>
    </fieldset>
</template>

<!-- 使用 <script setup> 语法糖 -->
<script setup>
// 使用 defineProps() 函数，接收父组件传递的数据
const props = defineProps({
    //验证是否字符串类型且必须有值
    userName: {
        type: String,
        required: true
    },
    //验证是否为字符串类型且默认值为男
    sex: {
        type: String,
        default: '男'
    },
    //验证是否为数值且值必须大于等于18
    age: {
        type: Number,
        validator: function (value) {
            return value >= 18
        }
    },
    //验证是否为数组类型且有默认值
    interest: {
        type: Array,
        default: function () {
            return ['游泳', '篮球', '羽毛球', '跑步']
        }
    },
    //验证是否为对象类型且有默认值
    blogInfo: {
        type: Object,
        default: function () {
            return {
                blogName: '您好，欢迎访问 pan_junbiao的博客',
                blogUrl: 'https://blog.csdn.net/pan_junbiao'
            }
        }
    }
});
</script>

<style scoped>
fieldset {
    font-size: 18px;
    color: blue;
}
</style>

（3）在 App.vue 根组件中，引入父组件

<template>
  <!-- 使用组件 -->
  <ParentComponent />
</template>
 
<script setup>
//导入组件，使用 <script setup> 语法糖，导入的组件将会自动执行注册
import ParentComponent from '@/components/ParentComponent.vue';

</script>

执行结果：