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 相关文章推荐
javascript (用setTimeout而非setInterval)
Dec 28 Javascript
javascript中使用正则计算中文长度的例子
Apr 29 Javascript
JavaScript动态加载样式表的方法
Mar 21 Javascript
JavaScript用select实现日期控件
Jul 17 Javascript
JavaScript学习笔记整理之引用类型
Jan 22 Javascript
JavaScript中输出信息的方法(信息确认框-提示输入框-文档流输出)
Jun 12 Javascript
JS实现图片局部放大或缩小的方法
Aug 20 Javascript
详解Node.js实现301、302重定向服务
Apr 07 Javascript
浅析从vue源码看观察者模式
Jan 29 Javascript
vue+mousemove实现鼠标拖动功能(拖动过快失效问题解决方法)
Aug 24 Javascript
微信小程序系列之自定义顶部导航功能
May 21 Javascript
vue-cli —— 如何局部修改Element样式
Oct 22 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
在windows平台上构建自己的PHP实现方法(仅适用于php5.2)
2013/07/05 PHP
ThinkPHP实现将SESSION存入MYSQL的方法
2014/07/22 PHP
PHP上传图片类显示缩略图功能
2016/06/30 PHP
Yii2-GridView 中让关联字段带搜索和排序功能示例
2017/01/21 PHP
PHP 对象继承原理与简单用法示例
2020/04/21 PHP
一个js封装的不错的选项卡效果代码
2008/02/15 Javascript
javascript 放大镜效果js组件 qsoft.PopBigImage.v0.35 加入了chrome支持
2009/04/07 Javascript
使用Microsoft Ajax Minifier减小JavaScript文件大小的方法
2010/04/01 Javascript
javascript计时器详解
2015/02/28 Javascript
jQuery实现简单的间隔向上滚动效果
2015/03/09 Javascript
JavaScript中使用自然对数ln的方法
2015/06/14 Javascript
JavaScript图片轮播代码分享
2015/07/31 Javascript
js实现三张图(文)片一起切换的banner焦点图
2015/08/25 Javascript
使用impress.js制作幻灯片
2015/09/09 Javascript
js性能优化技巧
2015/11/29 Javascript
浅谈JavaScript 函数参数传递到底是值传递还是引用传递
2016/08/23 Javascript
JavaScript实现类似拉勾网的鼠标移入移出效果
2016/10/27 Javascript
wap手机端解决返回上一页的js实例
2016/12/08 Javascript
JavaScript中日常收集常见的10种错误(推荐)
2017/01/08 Javascript
VUE JS 使用组件实现双向绑定的示例代码
2017/01/10 Javascript
浅谈angularJs函数的使用方法(大小写转换,拷贝,扩充对象)
2018/10/08 Javascript
[01:04:02]DOTA2-DPC中国联赛 正赛 Elephant vs IG BO3 第二场 1月24日
2021/03/11 DOTA
使用Python &amp; Flask 实现RESTful Web API的实例
2017/09/19 Python
python OpenCV学习笔记实现二维直方图
2018/02/08 Python
在Python中增加和插入元素的示例
2018/11/01 Python
python批量解压zip文件的方法
2019/08/20 Python
python获取array中指定元素的示例
2019/11/26 Python
python实现大战外星人小游戏实例代码
2019/12/26 Python
nginx搭建基于python的web环境的实现步骤
2020/01/03 Python
使用keras实现非线性回归(两种加激活函数的方式)
2020/07/05 Python
Python如何合并多个字典或映射
2020/07/24 Python
css3 flex实现div内容水平垂直居中的几种方法
2020/03/27 HTML / CSS
教师产假请假条范文
2014/04/10 职场文书
政协工作总结2015
2015/05/20 职场文书
劳动仲裁调解书
2015/05/20 职场文书
邹越演讲观后感
2015/06/15 职场文书