vue props使用,vue子组件props接接收的值怎么先修改再渲染
Props主要用于传递组件的值。他的工作是接收外部的数据，是和data、el、ref同级别的配置项。下面这篇文章主要介绍Vue组件如何设置道具的相关信息。有需要的朋友可以参考一下。
目录
属性类型属性默认值属性值验证属性设置汇总在Composition API中构建Vue中的组件通常需要定义一些属性，以便组件可以更好地重用。在这种情况下，props将用于定制数据以交付数据。接下来用一个简单的组件来介绍如何使用组件道具。
CrayonAlert title=友情提示 description=请输入真实信息/
如上面的代码所示，组件定义了两个属性title和description，组件代码如下：
模板
差异
h2{{ title }}/h2
p{{ description }}/p
/div
/模板
脚本
导出默认值{
姓名： CrayonAlert ，
道具：{
标题：{
类型：字符串，
},
描述：{
类型：字符串，
},
},
};
/脚本
属性类型
道具不限于字符串，还可以是以下类型：
objectarraysymbolfunctionnumberstringdateboll
属性默认值
在上面的代码中，当组件没有传入相应的属性值时，会显示未定义或者模板HTML中没有文本。此时，考虑定义一个默认值：
导出默认值{
姓名： CrayonAlert ，
道具：{
标题：{
类型：字符串，
默认值：“提示”，
},
描述：{
类型：字符串，
默认值：“描述”，
},
},
};
设置默认值后，没有参数值传入时，将显示默认值。这种方法常用于Vue2。
属性值验证
像表单数据一样，也可以验证组件属性值，如下所示：
导出默认值{
姓名： CrayonAlert ，
道具：{
标题：{
类型：字符串，
验证器(值){
返回值！==;
},
},
描述：{
类型：字符串，
验证器(值){
返回值！==;
},
},
},
};
Composition API 中设置属性
在Vue3中，引入了一个叫做Composition API的新方法。在组合API中，定义props使用defineProps函数。没有默认值的属性定义如下：
从“vue”导入{ define props }；
const props=defineProps({
标题：{
类型：字符串，
},
描述：{
类型：字符串，
},
});
默认值类似于Vue2中的值，如下所示：
从“vue”导入{ define props }；
const props=defineProps({
标题：{
类型：字符串，
默认值：“提示”，
},
描述：{
类型：字符串，
默认值：“描述”，
},
});
为了避免设置属性的默认值，可以使用必填字段根据需要设置属性。定义代码如下：
从“vue”导入{ define props }；
const props=defineProps({
标题：{
类型：字符串，
默认值：“提示”，
必填：真，
},
描述：{
类型：字符串，
默认值：“描述”，
必填：真，
},
});
总结
关于如何为Vue组件设置Propsx的文章到此结束。有关Propsx for Vue组件的更多信息，请搜索我们以前的文章或继续浏览下面的相关文章。希望你以后能支持我们！
郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。