vue组件Prop传递数据的实现示例


Posted in Javascript onAugust 17, 2017

组件实例的作用域是孤立的。这意味着不能(也不应该)在子组件的模板内直接引用父组件的数据。要让子组件使用父组件的数据,我们需要通过子组件的props选项。

prop 是单向绑定的:当父组件的属性变化时,将传导给子组件,但是不会反过来。这是为了防止子组件无意修改了父组件的状态。

每次父组件更新时,子组件的所有 prop 都会更新为最新值。这意味着你不应该在子组件内部改变 prop。

1、Prop静态传递数据

<!DOCTYPE html>
<html>
<head lang="en">
  <meta charset="UTF-8">
  <title></title>
  <script type="text/javascript" src="vue.js"></script>

</head>
<body >
<div id="app">
  <!--静态传递数据-->
   <my-component message="hello" name="刘二狗" age="18"></my-component>
</div>
</body>

<script>
  Vue.component('my-component',{
    //子组件使用父组件的数据 message name age
    props:['message','name','age'],
    //用data选项对数据进行处理
    data:function(){
     return{
       message1: this.message +'用data选项对数据进行处理'
     }
    },
    //用计算属性选项对数据进行处理
    computed:{
      message2:function(){
        return this.message + '用计算属性选项对数据进行处理'
      }
    },
    template:'<div>' +
          '<span>{{message1}}</span><br>'+
          '<span>{{message2}}</span><br>'+
          '<span>{{message}} {{name}}今年{{age}}了</span><br>'+
         '</div>'
  })
  new Vue({
    el:'#app'
  })
</script>
</html>

输出结果:

vue组件Prop传递数据的实现示例

2、Prop动态传递数据

<!DOCTYPE html>
<html>
<head lang="en">
  <meta charset="UTF-8">
  <title></title>
  <script type="text/javascript" src="vue.js"></script>
</head>
<body >
<div id="app">
    <input v-model="parentMsg"><br>
    <my-component :message="parentMsg"></my-component>
</div>
</body>

  <script>
    Vue.component('my-component',{
      props:['message'],
      data:function(){
        return{count:this.message+'刘三狗的嫉妒了'}
      },
      computed:{
        normalizedSize: function () {
          return this.message.trim().toLowerCase()
        }
      },
      template:'<div>' +
            '<span>{{message}}---{{normalizedSize}}</span><br>'+
            '<span>{{count}}</span>'+
           '</div>'
    })

    new Vue({
      el:'#app',
      data:{
        parentMsg:'哈哈哈'
      }
    })
</script>
</html>

输出结果:

vue组件Prop传递数据的实现示例

 3、Prop验证,我们可以为组件的 props 指定验证规格。如果传入的数据不符合规格,Vue 会发出警告。在前台的控制器中可以看到警告信息。

<!DOCTYPE html>
<html>
<head lang="en">
  <meta charset="UTF-8">
  <title></title>
  <script type="text/javascript" src="vue.js"></script>
</head>
<body>
  <div id="app">
    <example :prop-d="message"></example>
  </div>
</body>

<script>
  Vue.component('example', {
    props: {
      // 基础类型检测 (`null` 意思是任何类型都可以)
      propA: Number,
      // 多种类型
      propB: [String, Number],
      // 必传且是字符串
      propC: {
        type: String,
        required: true
      },
      // 数字,有默认值
      propD: {
        type: Number,
        default: 100
      },
      // 数组/对象的默认值应当由一个工厂函数返回
      propE: {
        type: Object,
        default: function () {
          return { message: 'hello' }
        }
      },
      // 自定义验证函数
      propF: {
        validator: function (value) {
          return value > 10
        }
      }
    },
    template:'<span>{{propD}}</span>'
  })

  new Vue({
    el:'#app',
    data:{
      message:'propD验证只能传入数字类型'
    }
  })
</script>
</html>

控制台输出的警告信息:

vue组件Prop传递数据的实现示例

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

Javascript 相关文章推荐
javascript据option的value值快速设定初始的selected选项
Aug 13 Javascript
单独使用CKFinder选择图片的方法
Aug 21 Javascript
JS面向对象编程 for Cookie
Sep 19 Javascript
js局部刷新页面时间具体实现
Jul 04 Javascript
JavaScript instanceof 的使用方法示例介绍
Oct 23 Javascript
Node.js环境下JavaScript实现单链表与双链表结构
Jun 12 Javascript
基于JS代码实现图片在页面中旋转效果
Jun 16 Javascript
浅谈vue-lazyload实现的详细过程
Aug 22 Javascript
layui 设置table 行的高度方法
Aug 17 Javascript
为jquery的ajax请求添加超时timeout时间的操作方法
Sep 04 jQuery
详解jQuery-each()方法
Mar 13 jQuery
二维码条形码生成的JavaScript脚本库
Jul 07 Javascript
js实现随机点名小功能
Aug 17 #Javascript
浅谈Vuejs Prop基本用法
Aug 17 #Javascript
简单快速的实现js计算器功能
Aug 17 #Javascript
使用jquery的jsonp如何发起跨域请求及其原理详解
Aug 17 #jQuery
如何理解Vue的.sync修饰符的使用
Aug 17 #Javascript
浅谈JS中的反柯里化( uncurrying)
Aug 17 #Javascript
js编写简单的聊天室功能
Aug 17 #Javascript
You might like
PHP 文件扩展名 获取函数
2009/06/03 PHP
PHP使用Pthread实现的多线程操作实例
2015/11/14 PHP
ZendFramework2连接数据库操作实例
2017/04/18 PHP
浅谈PHP匿名函数和闭包
2019/03/08 PHP
php7 图形用户界面GUI 开发示例
2020/02/22 PHP
javascript学习笔记(十四) window对象使用介绍
2012/06/20 Javascript
Javascript代码在页面加载时的执行顺序介绍
2013/05/03 Javascript
js获取dom的高度和宽度(可见区域及部分等等)
2013/06/13 Javascript
JS获取几种URL地址的方法小结
2014/02/26 Javascript
自己实现ajax封装示例分享
2014/04/01 Javascript
node.js中watch机制详解
2014/11/17 Javascript
JavaScript判断一个字符串是否包含指定子字符串的方法
2015/03/18 Javascript
JS+CSS实现仿触屏手机拨号盘界面及功能模拟完整实例
2015/05/16 Javascript
jquery动态增加删减表格行特效
2015/11/20 Javascript
JavaScript+CSS无限极分类效果完整实现方法
2015/12/22 Javascript
使用jQuery的easydrag插件实现可拖动的DIV弹出框
2016/02/19 Javascript
Angular2下使用pdf插件的方法详解
2017/04/29 Javascript
JS遍历JSON数组及获取JSON数组长度操作示例【测试可用】
2018/12/12 Javascript
微信小程序自定义导航栏实例代码
2019/04/05 Javascript
Layui之table中的radio在切换分页时无法记住选中状态的解决方法
2019/09/02 Javascript
js实现鼠标切换图片(无定时器)
2021/01/27 Javascript
[41:17]VG vs Optic 2018国际邀请赛小组赛BO2 第二场 8.19
2018/08/21 DOTA
[04:20]DOTA2-DPC中国联赛 正赛 VG vs LBZS 选手采访 1月19日
2021/03/11 DOTA
python之django母板页面的使用
2018/07/03 Python
Python网页正文转换语音文件的操作方法
2018/12/09 Python
解决python tkinter界面卡死的问题
2019/07/17 Python
python openCV获取人脸部分并存储功能
2019/08/28 Python
Pytorch实现的手写数字mnist识别功能完整示例
2019/12/13 Python
django admin管理工具自定义时间区间筛选器DateRangeFilter介绍
2020/05/19 Python
美国网上花店:JustFlowers
2017/02/12 全球购物
英语文学专业学生的自我评价
2013/10/31 职场文书
财务支持类个人的自我评价
2014/02/14 职场文书
公务员上班玩游戏检讨书
2014/09/17 职场文书
向雷锋同志学习倡议书
2015/04/27 职场文书
2019年行政人事个人工作总结范本!
2019/07/19 职场文书
Golang实现可重入锁的示例代码
2022/05/25 Golang