Vue的props配置项详解

简介

主要介绍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>

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

但是以上由一个文件，就是父组件进行数据的传递，是以普通属性的方式进行传递的，这样会导致传递的所有属性的值的类型都是字符串。

例子：

将年龄默认是传递过来加一。

效果：

所以不能使用普通的属性传递，需要借助v-bind指令进行绑定属性值，如果使用v-bind进行属性的绑定，会返回表达式返回的值，所以可以控制属性值的类型。

效果：

如果使用v-bind属性绑定的形式进行属性传递，还可以传递数组、对象类型的数据。

效果：

第二种方式可以限制数据的类型：

故意将年龄属性设置为字符串。

效果：书名这种限制只是一个控制台的警告，实际不影响展示。

第三种方式：可以限制类型，可以设置默认值，可以设置是否必须。

传递时，第二个标签不传递年龄，来测试默认值，第一个标签不传递名字，以测试必须。

效果：

可以发现，里面的限制，仅仅会发出控制台警告，但是不影响使用。

props的熟悉是只读的，如果修改，会控制台警告，但是还是会修改成功的，只是会警告一下。

效果：

如果实际业务需求需要更改props属性，那么可以复制一份props的内容到data，然后修改data中的数据。

效果：

总结

本篇文章就到这里了，希望能够给你带来帮助，也希望您能够多多关注我们的更多内容!

赞 (0)

相关推荐

  • Vue之props 配置详解

    Vue之props 配置详解

    <template> <div class="demo"> <h1>{{ msg}}</h1> <h2>学生姓名:{{name}}</h2> <h2>学生性别:{{sex}}</h2> <h2>学生的年龄:{{myage+1}}</h2> <button @click="changeAge">点我修改数据</button>

  • 详细聊聊vue中组件的props属性

    详细聊聊vue中组件的props属性

    目录 问题一:那props具体是怎么使用呢?原理又是什么呢?往下看 问题二:那如果我们想给年龄加1岁,怎么实现? 问题三:对于年龄这一类型,我们最希望拿到的是什么数据类型? 问题四:可以限制类型,那是不是也可以限制是否必传呢? 问题五:props接收的属性值可以修改吗? 问题六:必须要修改props属性值,怎么办? 总结:配置项props 总结 今天这篇文章,让你彻底学会props属性-- props主要用于组件的传值,他的工作就是为了接收外面传过来的数据,与data.el.ref是一个级别的配

  • vue - props 声明数组和对象操作

    我就废话不多说了,大家还是直接看代码吧~ props: { array: { type: Array, default () { return [] } }, object: { type: Object, default () { return {} } } } 补充知识:Vue项目中,要保证某个部分的高度,应该怎么设置 看代码吧~ .icons overflow: hidden height: 0 padding-bottom: 50% background: green 以上这篇vue -

  • Vue中props用法介绍

    Vue中props用法介绍

    ​前言: 在Vue中通过props,可以将原本孤立的组件串联起来,也就是可以子组件可以接收父组件传递过来的data,比如子组件想要引用父组件的数据,那么在props里面声明一个变量,这个变量就可以引用父元素的数据. 实例演示: 子组件: <template> <div> <h3>我是{{name}},今年{{age}}岁,爱好:{{hobby}}</h3>,{{flag}} </div> </template> <script&

  • VUE3之Non-Props属性的具体使用

    VUE3之Non-Props属性的具体使用

    目录 1. 概述 2.Non-Props 属性 2.1 初识Non-Props 属性 2.2 不想把Non-Props 属性 渲染到最外层标签 2.3Non-Props 属性的使用场景 2.4 子组件有多个最外层标签 2.5 为某个最外层标签渲染 2.6 获取父组件传递的某一个属性 2.7 生命周期函数获取Non-Props 属性 3. 综述 1. 概述 墨菲定律告诉我们:人总是容易犯错误的,无论科技发展到什么程度,无论是什么身份的人,错误总是会在不经意间发生.因此我们最好在做重要的事情时,尽量

  • Vue的props配置项详解

    Vue的props配置项详解

    简介 主要介绍props配置项的概念,使用等. props的作用是用来接收父组件中传过来的数据. 编写步骤有两个: 子组件使用props配置项进行属性的接收. 父组件使用子组件时以组件标签属性的形式进行数据的传递. 子组件使用props配置项进行属性的接收的形式有三种: 第一种:简单模式. main.js: //引入vue依赖 import Vue from 'vue' //引入组件App import App from './App.vue' // 关闭生产提示 Vue.config.prod

  • Vue中props的详解

    Vue中props的详解

    看一下官方文档: 组件实例的作用域是孤立的.这意味着不能 (也不应该) 在子组件的模板内直接引用父组件的数据.父组件的数据需要通过 prop 才能下发到子组件中. 也就是props是子组件访问父组件数据的唯一接口. 详细一点解释就是: 一个组件可以直接在模板里面渲染data里面的数据(双大括号). 子组件不能直接在模板里面渲染父元素的数据. 如果子组件想要引用父元素的数据,那么就在prop里面声明一个变量(比如a),这个变量就可以引用父元素的数据.然后在模板里渲染这个变量(前面的a),这时候渲染

  • Vue组件选项props实例详解

    Vue组件选项props实例详解

    前面的话 组件接受的选项大部分与Vue实例一样,而选项props是组件中非常重要的一个选项.在 Vue 中,父子组件的关系可以总结为 props down, events up.父组件通过 props 向下传递数据给子组件,子组件通过 events 给父组件发送消息.本文将详细介绍Vue组件选项props 静态props 组件实例的作用域是孤立的.这意味着不能 (也不应该) 在子组件的模板内直接引用父组件的数据.要让子组件使用父组件的数据,需要通过子组件的 props 选项 使用Prop传递数据

  • vue中component组件的props使用详解

    vue中component组件的props使用详解

    本文介绍了 vue中component组件的props使用详解,分享给大家,具体如下: props使用方法 Vue.component('my-component',{ props:['message'], template:'<div class="tem1">{{message}}</div>' }); <my-component message="hello"></my-component> 注意:props 的

  • Vue props用法详解(小结)

    Vue props用法详解 组件接受的选项之一 props 是 Vue 中非常重要的一个选项.父子组件的关系可以总结为: props down, events up 父组件通过 props 向下传递数据给子组件:子组件通过 events 给父组件发送消息. 父子级组件 比如我们需要创建两个组件 parent 和 child.需要保证每个组件可以在相对隔离的环境中书写,这样也能提高组件的可维护性. 这里我们先定义父子两个组件和一个 Vue 对象: var childNode = { templat

  • Vue生命周期函数调用详解

    Vue生命周期函数调用详解

    目录 生命周期 Vue.mixin 生命周期选项合并 调用生命周期函数 结语 生命周期 Vue为用户提供了许多生命周期钩子函数,可以让用户在组件运行的不同阶段书写自己的逻辑. 那么Vue内部到底是如何处理生命周期函数的呢?Vue的生命周期究竟是在代码运行的哪个阶段执行呢?本文将实现Vue生命周期相关代码的核心逻辑,从源码层面来理解生命周期. Vue.mixin 在介绍生命周期之前,我们先来看下Vue.mixin. Vue.mixin是Vue的全局混合器,它影响Vue创建的每一个实例,会将mixi

  • Vue.extend构造器的详解

    Vue.extend构造器的详解 1.简单介绍 Vue.extend(options) 参数:对象 用法:使用Vue构造器,创建一个"子类",参数是一个包含组件选项的对象,其中,data选项中必须是函数 描述:Vue.extend返回的是一个"扩展实例构造器",也就是预设了部分选项的Vue的实例构造器,它常常服务于Vue.component用来生成组件,可以简单理解为当在模板中遇到该组件作为标签的自定义元素时,会自动调用"扩展实例构造器"来生产组

  • 使用vue cli4.x搭建vue项目的过程详解

    cli-4.x已经发布好久了,斟酌了好久,还是决定将原来的cli-2.x升级到4.x,详细的升级过程可以戳这里 1.创建项目 vue create vuetest 2.选择配置方式 ? Please pick a preset: (Use arrow keys) ☜(使用箭头键) > default (babel, eslint) ☜(使用默认的配置,会安装babel和eslint) Manually select features ☜(手动配置) 这里我选择的是手动配置(使用↑ ↓箭头切换,E

  • vue中组件通信详解(父子组件, 爷孙组件, 兄弟组件)

    vue中我们常常用到组件. 那么组件总体可以分为如下的几种关系. 父子组件, 爷孙组件, 兄弟组件. 这几种组件之间是如何通信的呢? 父子组件通信 根据vue中的文档可知, 组件的props属性用于接收父组件传递的信息. 而子组件想要向父组件传递信息, 可以使用$emit事件. 我们定义两个组件, 一个为父组件名为father, 另外一个为子组件child. 子组件通过props属性接收父组件传递的值, 这个值为fname, 是父组件的名字. 点击子组件的按钮, 触发toFather事件, 向父

随机推荐