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 相关文章推荐
网页自动刷新,不产生嗒嗒声的一个解决方法
Mar 27 Javascript
jQuery 剧场版 你必须知道的javascript
May 27 Javascript
分享一个用Mootools写的鼠标滑过进度条改变进度值的实现代码
Dec 12 Javascript
jquery $.getJSON()跨域请求
Dec 21 Javascript
兼容ie、firefox的图片自动缩放的css跟js代码分享
Aug 12 Javascript
鼠标选择动态改变网页背景颜色的JS代码
Dec 10 Javascript
使用JavaScript为Kindeditor自定义按钮增加Audio标签
Mar 18 Javascript
ECMAScript6轮播图实践知识总结
Aug 17 Javascript
jQuery 插件封装的方法
Nov 16 Javascript
js数组操作方法总结(必看篇)
Nov 22 Javascript
JavaScript中Array对象用法实例总结
Nov 29 Javascript
详解微信小程序开发聊天室—实时聊天,支持图片预览
May 20 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 autoload与spl_autoload自动加载机制的深入理解
2013/06/05 PHP
PHP邮箱验证示例教程
2016/06/01 PHP
PHP水印类,支持添加图片、文字、填充颜色区域的实现
2017/02/04 PHP
js监听表单value的修改同步问题,跨浏览器支持
2009/12/31 Javascript
父子窗体间传递JSON格式的数据的代码
2010/12/25 Javascript
Three.js学习之正交投影照相机
2016/08/01 Javascript
详解微信小程序开发之——wx.showToast(OBJECT)的使用
2017/01/18 Javascript
JS中使用textPath实现线条上的文字
2017/12/25 Javascript
Angular 向组件传递模板的两种方法
2018/02/23 Javascript
微信小程序登录换取token的教程
2018/05/31 Javascript
Vue父子组件双向绑定传值的实现方法
2018/07/31 Javascript
Vue 修改网站图标的方法
2020/12/31 Vue.js
[36:33]完美世界DOTA2联赛循环赛 Matador vs Forest 第一场 11.06
2020/11/06 DOTA
你应该知道的python列表去重方法
2017/01/17 Python
Python实现检测文件MD5值的方法示例
2018/04/11 Python
pip安装时ReadTimeoutError的解决方法
2018/06/12 Python
Python3.6实现带有简单界面的有道翻译小程序
2019/04/16 Python
python实现几种归一化方法(Normalization Method)
2019/07/31 Python
Python使用微信itchat接口实现查看自己微信的信息功能详解
2019/08/22 Python
Python工程师必考的6个经典面试题
2020/06/28 Python
Python3爬虫RedisDump的安装步骤
2021/02/20 Python
HTML5 和小程序实现拍照图片旋转、压缩和上传功能
2018/10/08 HTML / CSS
html5实现滑块功能之type=&quot;range&quot;属性
2020/02/18 HTML / CSS
中国跨镜手机配件批发在线商店:TVC-Mall
2019/08/20 全球购物
用你熟悉的语言写一个连接ORACLE数据库的程序,能够完成修改和查询工作
2012/06/11 面试题
教育科学研究生自荐信
2013/10/09 职场文书
syb养殖创业计划书
2014/01/09 职场文书
长安大学毕业生自我鉴定
2014/01/17 职场文书
班级文化标语
2014/06/23 职场文书
2014离婚协议书范文
2014/09/10 职场文书
医院领导班子整改方案
2014/10/01 职场文书
学校运动会广播稿
2014/10/11 职场文书
党支部评议意见
2015/06/02 职场文书
golang 定时任务方面time.Sleep和time.Tick的优劣对比分析
2021/05/05 Golang
Mybatis-plus在项目中的简单应用
2021/07/01 Java/Android
vue3使用vuedraggable实现拖拽功能
2022/04/06 Vue.js