vue中component组件的props使用详解
更新时间：2017年09月04日 09:02:19 作者：v折耳
本篇文章主要介绍了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 的声明需要放在template的前面
props可以使用实例中的变量赋值
全局组件可以获取用使用prop 的做操作
下面例子为message先先渲染为 "hello!!!" click点击事件 调用zan方法为重新为comdata,message赋值
但是只有comdata显示 不能影响message的值显示
<div id="app">
<my-component v-bind:message='message'></my-component>
</div>
</body>
<script>
Vue.component('my-component',{
props:['message'],
template:'<div v-on:click="zan">{{comdata}}<div>{{message}}</div></div>',
data:function(){return {comdata:this.message}},
methods:{
zan:function(){
this.comdata=this.message+'vue';
this.message=this.message+'vue'
}
}
});
var app=new Vue({
el:'#app',
data:{message:'hello!!!'}
})
</script>
prop验证
组件为props提供了验证功能
props:{propName:
{
typpe:[Number,String,Boolean,Function,Array,Object]，
default:function(){
return {name:'weng'}
},
validator:function(value){
return value.length>3
}
}
}
ps:type可以自定义 使用instanceof检测
validator验证需要在开发版本vuejs下在控制台才会有输出
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。
相关文章
这篇文章主要介绍了vue中(el-button的五种类型，三种css格式)具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-07-07
本文主要介绍了vue+axios实现图片上传识别人脸，这里采用的是vant的文件上传组件，通过上传图片后端识别图片里的人脸，感兴趣的可以了解一下2021-11-11
这篇文章主要介绍了vue使用jsencrypt实现rsa前端加密,本文通过实例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下2023-09-09
解决‘vue-cli-service‘不是内部或外部命令,也不是可运行的程序问题
遇到'vue-cli-service'不是内部或外部命令的错误通常因为VueCLI未正确安装或配置,解决步骤包括确保VueCLI全局安装、检查项目依赖、安装项目依赖、清理并重新安装依赖以及使用npm脚本调用vue-cli-service,按步骤操作后应能解决问题2024-11-11
这篇文章主要介绍了vue2中使用AntV 以g2plot为实例，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-04-04
在 Vue + Vite 项目中,当使用环境变量进行条件组件加载时,在生产环境打包后可能会出现 CSS 样式丢失的问题,本文通过代码示例给大家介绍了三种解决方案,需要的朋友可以参考下2025-08-08
本篇文章主要介绍了vue 2.0封装model组件的方法，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2017-08-08
这篇文章主要为大家介绍了调用createApp 时Vue工作过程原理解析，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪2023-01-01
这篇文章主要介绍了vue项目使用websocket连接问题及解决，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-10-10
前端开发中,用户体验是至关重要的,图像上传是许多 web 应用中经常需要的功能之一,为了提升用户的交互体验,拖拽上传功能可以减少用户的操作步骤,本文将介绍如何使用 Vue 3实现一个简单的图片拖拽上传功能,需要的朋友可以参考下2024-08-08
最新评论