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 相关文章推荐
JS 常用校验函数
Mar 26 Javascript
解决jquery .ajax 在IE下卡死问题的解决方法
Oct 26 Javascript
IE6下js通过css隐藏select的一个bug
Aug 16 Javascript
Jquery多选框互相内容交换的实例代码
Jul 04 Javascript
js检测判断日期大于多少天的方法
May 04 Javascript
AngularJS变量及过滤器Filter用法分析
Nov 22 Javascript
ECMAScript6--解构
Mar 30 Javascript
JavaScript实现的选择排序算法实例分析
Apr 14 Javascript
全面解析jQuery中的$(window)与$(document)的用法区别
Aug 15 jQuery
zepto.js 实时监听输入框的方法
Dec 04 Javascript
js实现多张图片每隔一秒切换一张图片
Jul 29 Javascript
解决vue prop传值default属性如何使用,为何不生效的问题
Sep 21 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&amp;mysql(二)
2006/10/09 PHP
PHP 字符串分割和比较
2009/10/06 PHP
jQuery获取json后使用zy_tmpl生成下拉菜单
2015/03/27 PHP
也说JavaScript中String类的replace函数
2011/09/22 Javascript
JQuery中根据属性或属性值获得元素(6种情况获取方法)
2013/01/17 Javascript
window.print打印指定div实例代码
2013/12/13 Javascript
Node.js 服务器端应用开发框架 -- Hapi.js
2014/07/29 Javascript
通过JS动态创建一个html DOM元素并显示
2014/10/15 Javascript
深入理解JavaScript系列(47):对象创建模式(上篇)
2015/03/04 Javascript
jquery使用Cookie和JSON记录用户最近浏览历史
2016/04/19 Javascript
JavaScript-定时器0~9抽奖系统详解(代码)
2017/08/16 Javascript
vue中如何让子组件修改父组件数据
2018/06/14 Javascript
小程序实现人脸识别功能(百度ai)
2018/12/23 Javascript
关于微信小程序获取小程序码并接受buffer流保存为图片的方法
2019/06/07 Javascript
JS开发 富文本编辑器TinyMCE详解
2019/07/19 Javascript
5分钟教你用nodeJS手写一个mock数据服务器的方法
2019/09/10 NodeJs
浅谈JSON5解决了JSON的两大痛点
2020/12/14 Javascript
利用python库在局域网内传输文件的方法
2018/06/04 Python
Python 中的range(),以及列表切片方法
2018/07/02 Python
python matplotlib库直方图绘制详解
2019/08/10 Python
Java Spring项目国际化(i18n)详细方法与实例
2020/03/20 Python
利用python 读写csv文件
2020/09/10 Python
Python学习之time模块的基本使用
2021/01/17 Python
pycharm 的Structure界面设置操作
2021/02/05 Python
static函数与普通函数有什么区别
2015/12/25 面试题
工业学校毕业生自荐书
2014/01/03 职场文书
中文专业毕业生自荐书范文
2014/01/04 职场文书
置业顾问岗位职责
2014/03/02 职场文书
土地转让协议书
2014/04/15 职场文书
产品发布会策划方案
2014/05/12 职场文书
城管年度个人总结
2015/02/28 职场文书
幼师自荐信范文
2015/03/06 职场文书
2016年社区“6.26”禁毒日宣传活动总结
2016/04/05 职场文书
银行求职信怎么写
2019/06/20 职场文书
如何书写民事调解协议书?
2019/06/25 职场文书
SQL Server的存储过程与触发器以及系统函数和自定义函数
2022/04/10 SQL Server