1.什么是 props

props 用于组件的传值，他的工作就是为了接受外面传过来的数据，是一个配置项，与data、el、ref 是一个级别的。

2.props 的使用

--1 先准备子组件 Text1.vue ，一个父组件 app.vue ，在 App.vue 中导入两个子组件

--2 在 App.vue 中导入 text1.vue 组件

--3 在父组件中子组件标签里传数据给子组件

<template><div><text1 name= "张胜男" brith="2002" age="20"></text1></div>
</template>

--4 在子组件定义 props 对象，里面包含三个数据，在 template标签中 div标签里面使用此数据

3.props 属性

--1 props 数据有类型之分

我们先来看一下输出的结果，生日和年龄看似是数字类型，实际上是字符串类型，通过 Vue 调试工具可以看到是字符串类型。

在这种情况下：实现生日 +1 的功能，会怎样呢，会不会报错？

<template><div><text1 name= "张胜男" brith="2002 + 1" age="20"></text1></div>
</template>

可以看到并没有报错，但生日这项并没有像我们预期的一样是 2003，所有应该怎样操作？

--- 我们可以 在 brith 前面加一个 ' ：' 符号冒号，再看看结果：

<template><div><text1 name= "张胜男" :brith="2002 + 1" age="20"></text1></div>
</template>

可以看见现在结果是我们想要的 2003。

同理我们把年龄前面加上冒号，为了确保正确在Vue控制台也可看见结果如下：

为了防止操作失误传错数据（虽然不影响显示，但是影响字符串拼接、数字计算）

我们就需要限制一下数据的类型。代码演示：

props: {"name": String,"brith": Number,"age": Number},

--2 props 数据不可更改

如何实现年龄更改呢？

<button @click="changeAge">修改年龄</button>methods: {changeAge() {this.age = 88}},

--- 可以看见，年龄虽然可以修改，但是有个警告！

--- 解决方案：我们需要使用一个中间值 temp 接收传来的 props 数据，然后对 temp 更改即可。

  data() {return {temp: this.age}},methods: {changeAge() {this.temp = 88}},

注意：原来的年龄插值是 {{ age }}，但是使用此方法，年龄插值就需要改变为 {{ temp }}

-- props 设置必传数据（数值不可为空），和属性默认值

用对象的方法定义单个数据：

props: {'name': {type: String,default: '刘德华'，required: true},'brith': {type: Number},'age': {type: Number}},

如果在 App.vue 中不传数据，那结果会怎样？

解析：我们设置了 default: ' 刘德华 '，那么属性 name 就会取 ' 刘德华 '。

如果我们去掉 default 那一项，留下 required: true，结果会怎样？

结果是会有警告：

Vue中的 props 属性相关推荐

vue中的props对象
vue中的props对象 1.props对象的定义 props其实是properties的缩写,props对象是用来定义属性的.props对象可以接受数组形式的参数又或者是对象形式的参数. 数组形式 ...
[vue] vue中data的属性可以和methods中的方法同名吗？为什么
[vue] vue中data的属性可以和methods中的方法同名吗?为什么源码中的 initData() 方法 if (methods && hasOwn(methods, ke ...
Vue 中的 ref 属性详解
Vue 中的 ref 属性详解我们先来读一下vue的官方文档我们来分析官方文档首先ref的引用是相当于一个DOM节点(如果是子组件则指向的是其实例),而且是一个string类型的值. 通俗的将就 ...
vue - 深入理解vue中的scoped属性
文章目录 1,前言 2,scoped原理 3,父子组件使用scoped的不同情况 4,第一种:父组件未添加scoped,子组件未添加scoped 5,第二种:父组件未添加scoped,子组件添加sco ...
vue中的ref属性
vue中的ref属性使用vue开发时经常会用到ref属性,ref属性有什么作用呢?我刚开始用的时候发现这个属性有点鸡肋,总是感觉可有可无,但是随着不断的使用vue,慢慢地发现它的作用还是挺重要的 ...
vue 组件，props 属性，Vue 生命周期
本文涉及3个内容: 1.vue 组件: 目录结构: 源码分析如下: <div id="container"><h3>爱吃什么水果? app 实例</ ...
vue中的props
StuProps.vue: <template><div class="props-container"><h1>我叫:{{name}}< ...
VS创建props属性表并在新项目中导入props属性表
创建props属性表过程见配置PCL的一个例子:VS2019配置PCL 上面一篇执行完现在生成了pclX64.props 创建一个新的项目: 创建好了之后,复制进来两个文件,那个pcd模板文件见上面那 ...
Vue中的computed属性
1.前言本篇是Vue中最常用到的API之一computed属性,转载信息如下: 作者:gunelark 链接:https://www.cnblogs.com/gunelark/p/8492468.h ...

Vue中的 props 属性