Vue的props配置项详解

时间：2023-01-18 11:00:18|栏目：vue|点击：次

简介

主要介绍props配置项的概念，使用等。

props的作用是用来接收父组件中传过来的数据。

编写步骤有两个：

子组件使用props配置项进行属性的接收。
父组件使用子组件时以组件标签属性的形式进行数据的传递。

子组件使用props配置项进行属性的接收的形式有三种：

第一种：简单模式。

main.js：

//引入vue依赖
import Vue from 'vue'
//引入组件App
import App from './App.vue'

// 关闭生产提示
Vue.config.productionTip = false

//创建一个vue实例
new Vue({
  //这个目前还没学过，先知道他的作用是将app放入容器中。
  render: h => h(App),

  //配置该vue实例管理id为app的容器
}).$mount('#app')

App.vue：

<template>
    <!-- 编写结构 -->
    <div>
    <!-- 父组件编写组件标签时，将数据以属性的方式进行传递。 -->
    <student studentName="Yehaocong" studentAge="25"></student>
    <student studentName="Liaoxiaoyan" studentAge="21"></student>
    </div>
</template>

<script>

import student from "./components/Student.vue"

export default {


    components:{
        //注册组件
        student
    }
}
</script>

<style>

</style>

Student.vue：

<template>
    <!-- 编写组件结构代码，也就是html代码 -->
    <!-- 需要一个div括住，也就是只能有一个根元素，一般使用div -->
    <div class="orange">
        <div>学生姓名：{{studentName}}</div>
        <div>年龄：{{studentAge}}</div>
    </div>
</template>

<script>
//交互代码编写的地方，需要暴露出去给其他地方引入
//这个需要有一点es6模块化的知识，这里一般使用默认暴露，因为这是单文件组件，只需要暴露一个组件对象，
//并且引入默认暴露的组件引入语法比较简单。
export default {
    data() {
        return {
        
        }
    },

    //简便写法,用于接收父组件传递过来的数据
    //数组形式，里面声明属性名称即可
    props:["studentName","studentAge"],
}
</script>

<style>
    /* 编写样式的地方 */
    .orange{
        background-color: orange;
    }
</style>

效果：可以看到数据以正确显示。

在这里插入图片描述