需求

一个展示学生信息的组件
Student.vue:

<template><!-- 组件的结构,相当于非单文件中的  template配置--><div class="demo"><h2>名字:{{name}}</h2><h2>年龄:{{ age }}</h2></div>
</template>
<script>
// 组件交互的代码（数据、方法），相当于非单文件中的出了template的配置
export default {name:'StudentVue',data() {return {name: "yang",age: 18,};},
}</script>
<style>/* 组建的样式 */
.demo{background: green;
}
</style>

APP.VUE:

<template><div><Student/></div>
</template>
<script>
//引入组件
import Student from './components/Student'
export default {name: 'App',components: {Student},data() {return {msg:"欢迎！！！"}},}
</script><style>
</style>

输出：

需求：学生页面的数据是动态传入的，而不是写死的——引入props配置

props配置

App.vue传入数据的时候通标签的属性传入，
Student.vue中通过 props配置进行引入。

注意: 传递的属性名要和props配置的接收的名字要一致。

props配置简单接收——数组形式

props: ['属性名','属性名']

app.vue;

<template><div><Student name='张三' age="20"/></div>
</template>
<script>
//引入组件
import Student from './components/Student'
export default {name: 'App',components: {Student},data() {return {msg:"欢迎！！！"}},}
</script><style>
</style>

student.vue

<template><!-- 组件的结构,相当于非单文件中的  template配置--><div class="demo"><h2>名字:{{name}}</h2><h2>年龄:{{ age }}</h2></div>
</template>
<script>
// 组件交互的代码（数据、方法），相当于非单文件中的出了template的配置
export default {name:'StudentVue',props: ['name','age']
}</script>
<style>/* 组建的样式 */
.demo{background: green;
}
</style>

props配置接收——对象形式

可以对接收参数的数据格式进行限制：

    props: {name: String,age:Number}

props配置接收——对象形式2

可以对接收参数的数据格式进行限制，同时可以限制属性是否是必需的，也可以设置默认值

    props: {name: {type: String,required:true,},age: {type: Number,default:99},}

props配置分析

通过props配置接受的属性最终配置在组建的实例对象上（vc）
传入数据的时候通标签的属性传入,即属性="值"，所以默认情况下传过去的属性值都是字符串，如果想要传过去number值，可以靠v-bind实现
<Student name='张三' :age="20"/>
:age="20"会将 "20"解析成js表达式，表达式的结果就是number类型的20，所以传过去的值就是number类型的18.
propos可以对传入的属性值的类型进行限制
propos传过来的属性不能修改
props是只读的，Vue底层会监测你对props的修改，如果进行了修改，就会发出警告，若业务需求确实需要修改，那么请复制props的内容到data中一份，然后去修改data中的数据。

若要修改props传过来的属性，需要这样写：

<template><!-- 组件的结构,相当于非单文件中的  template配置--><div class="demo"><h2>名字:{{name}}</h2><h2>年龄:{{ myAge }}</h2><button @click="addAge">点击年龄修改</button></div>
</template>
<script>// 组件交互的代码（数据、方法），相当于非单文件中的出了template的配置
export default {name:'StudentVue',data() {console.log(this)return {myAge:this.age}},props: {name: {type: String,required:true,},age: {type: Number,default:99},},methods: {addAge() {this.myAge++}}
}</script>
<style>/* 组建的样式 */
.demo{background: green;
}
</style>

props的优先级

props的优先级比较高，高于data(){}配置

Vue——props配置相关推荐

vue props配置对象
要点: 先创建一个Student子组件并且之前说过,当写重复的组件,它们的数据不是同步的,因为extend 进行了一个new Vue Component()构造函数每次应用组件标签生成的都是一个新 ...
vue 组件 props配置
props 配置用于接收外部传入的属性 props 是只读的若强行修改控制台会报错 <template><div><StudentTest name='李四' sex ...
vue路由router的props配置
vue路由router的props配置前置知识:vue-router3路由配置和使用,适配vue2,vue-router代码模版路由props配置的作用:让路由组件更方便的接收到参数 ⚠️ 当不使 ...
【Vue2.0】—props 配置（十三）
[Vue2.0]-props 配置(十三) <template><div class="demo"><h1>{{ msg}}</h1> ...
Vue学习记录8，vue脚手架配置代理的两种方式，Github搜索案例，vue-resource，三种插槽，Vuex及搭建Vuex环境，getter和四个map方法的使用，模块化+命名空间
目录 vue脚手架配置代理方法一方法二 Github搜索案例 UserList.vue UserSearch.vue 效果图 vue-resource 插槽默认插槽具名插槽作用域插槽 Vue ...
vuejs中路由的传参以及路由props配置
虽互不曾谋面,但希望能和您成为笔尖下的朋友以读书,技术,生活为主,偶尔撒点鸡汤不作,不敷衍,意在真诚吐露,用心分享点击左上方,可关注本刊标星公众号(ID:itclanCoder) 如果不知道如 ...
Vue复习知识点（理解MVVM模式、Vue实例配置的各选项、Vue的各种内置指令....）
Vue复习知识点一.理解MVVM模式 VVM是一种设计模式,它将应用程序分为三个部分:模型(Model).视图(View)和视图模型(ViewModel).它的主要目的是将应用程序的界面逻辑与业务逻 ...
vue——props的两种常用方法
vue--props的两种常用方法 1.实现父-->子的通信举例如下: 父组件 parent.vue <children :channel="object1"> ...
使用Jenkins持续集成Vue项目配置Sonar任务
title: 使用Jenkins持续集成Vue项目配置Sonar任务 tags: jenkins Vue.js Sonar categories: ci date: 2017-12-05 22:09: ...

Vue——props配置

文章目录

需求