vue中component组件的props使用详解


Posted in Javascript onSeptember 04, 2017

本文介绍了 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>

vue中component组件的props使用详解

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下在控制台才会有输出

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
prototype Element学习笔记(篇一)
Oct 26 Javascript
jquery实现简单的表单验证
Nov 17 Javascript
jQuery Validate初步体验(二)
Dec 12 Javascript
ECMAScript6快速入手攻略
Jul 18 Javascript
jQuery和CSS仿京东仿淘宝列表导航菜单
Jan 04 Javascript
简单实现js倒计时功能
Feb 13 Javascript
react-navigation 如何判断用户是否登录跳转到登录页的方法
Dec 01 Javascript
vue中v-for加载本地静态图片方法
Mar 03 Javascript
vue实现组件之间传值功能示例
Jul 13 Javascript
Flutter部件内部状态管理小结之实现Vue的v-model功能
Jun 11 Javascript
五分钟搞懂Vuex实用知识(小结)
Aug 12 Javascript
layui 富文本图片上传接口与普通按钮 文件上传接口的例子
Sep 23 Javascript
React-Native中props具体使用详解
Sep 04 #Javascript
用最简单的方法判断JavaScript中this的指向(推荐)
Sep 04 #Javascript
JS与HTML结合实现流程进度展示条思路详解
Sep 03 #Javascript
JS实现简单的选择题测评系统代码思路详解(demo)
Sep 03 #Javascript
JS实现页面内跳转的简单代码
Sep 03 #Javascript
初探JavaScript 面向对象(推荐)
Sep 03 #Javascript
jquery+css实现下拉列表功能
Sep 03 #jQuery
You might like
PHP 工厂模式使用方法
2010/05/18 PHP
使用phpstorm和xdebug实现远程调试的方法
2015/12/29 PHP
选择TreeView控件的树状数据节点的JS方法(jquery)
2010/02/06 Javascript
JS数组的遍历方式for循环与for...in
2014/07/31 Javascript
JS实现来回出现文字的状态栏特效代码
2015/10/31 Javascript
javascript动态生成树形菜单的方法
2015/11/14 Javascript
js微信分享API
2020/10/11 Javascript
AngularJS基础 ng-mouseover 指令简单示例
2016/08/02 Javascript
详解Vue.js动态绑定class
2016/12/20 Javascript
Easyui Tree获取当前选择节点的所有顶级父节点
2017/02/14 Javascript
JS实现数组去重方法总结(六种方法)
2017/07/14 Javascript
IScroll那些事_当内容不足时下拉刷新的解决方法
2017/07/18 Javascript
vuex实现登录状态的存储,未登录状态不允许浏览的方法
2018/03/09 Javascript
vue2过滤器模糊查询方法
2018/09/16 Javascript
js操作table中tr的顺序实现上移下移一行的效果
2018/11/22 Javascript
NUXT SSR初级入门笔记(小结)
2019/12/16 Javascript
js原生map实现的方法总结
2020/01/19 Javascript
Django集成百度富文本编辑器uEditor攻略
2014/07/04 Python
Python os模块介绍
2014/11/30 Python
python回溯法实现数组全排列输出实例分析
2015/03/17 Python
约瑟夫问题的Python和C++求解方法
2015/08/20 Python
Python升级导致yum、pip报错的解决方法
2017/09/06 Python
python爬虫爬取淘宝商品信息
2018/02/23 Python
python 爬虫一键爬取 淘宝天猫宝贝页面主图颜色图和详情图的教程
2018/05/22 Python
Python 使用元类type创建类对象常见应用详解
2019/10/17 Python
Python PyPDF2模块安装使用解析
2020/01/19 Python
Python发送手机动态验证码代码实例
2020/02/28 Python
Spartoo英国:欧洲最大的网上鞋店
2016/09/13 全球购物
加多宝凉茶广告词
2014/03/18 职场文书
开工仪式主持词
2014/03/20 职场文书
运动会演讲稿100字
2014/08/25 职场文书
擅自离岗检讨书
2014/09/12 职场文书
学生自我鉴定格式及范文
2014/09/16 职场文书
公安民警正风肃纪剖析材料
2014/10/10 职场文书
2014年社区综治工作总结
2014/11/17 职场文书
我的收音机情缘
2022/04/05 无线电