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 相关文章推荐
js验证表单大全
Nov 25 Javascript
Javascript insertAfter() 实现函数代码
Oct 12 Javascript
JavaScript根据数据生成百分比图和柱状图的实例代码
Jul 14 Javascript
Ext中下拉列表ComboBox组件store数据格式用法介绍
Jul 15 Javascript
javascript数组去重的方法汇总
Apr 14 Javascript
jquery实现的缩略图预览滑块实例
Jun 25 Javascript
js实现精确到秒的倒计时效果
May 29 Javascript
JS数组去重(4种方法)
Mar 27 Javascript
解决Layui当中的导航条动态添加后渲染失败的问题
Sep 25 Javascript
Vue列表循环从指定下标开始的多种解决方案
Apr 08 Javascript
解决基于 keep-alive 的后台多级路由缓存问题
Dec 23 Javascript
vue的项目如何打包上线
Apr 13 Vue.js
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变量赋值、代入给JavaScript中的变量
2015/06/29 PHP
PHPExcel简单读取excel文件示例
2016/05/26 PHP
PHP实现对二维数组某个键排序的方法
2016/09/14 PHP
PHP设计模式之原型模式定义与用法详解
2018/04/03 PHP
ExtJs扩展之GroupPropertyGrid代码
2010/03/05 Javascript
JavaScript 学习笔记之一jQuery写法图片等比缩放以及预加载
2012/06/28 Javascript
使用javascript实现ListBox左右全选,单选,多选,全请
2013/11/07 Javascript
jQuery中extend函数的实现原理详解
2015/02/03 Javascript
浅谈JavaScript函数的四种存在形态
2016/06/08 Javascript
分享JS代码实现鼠标放在输入框上输入框和图片同时更换样式
2016/09/01 Javascript
JS实现用户注册时获取短信验证码和倒计时功能
2016/10/27 Javascript
TypeScript入门-基本数据类型
2017/03/28 Javascript
iscroll.js滚动加载实例详解
2017/07/18 Javascript
浅谈通过JS拦截 pushState和replaceState事件
2017/07/21 Javascript
node文字生成图片的示例代码
2017/10/26 Javascript
vue2.0 实现页面导航提示引导的方法
2018/03/13 Javascript
vue项目中vue-i18n和element-ui国际化开发实现过程
2018/04/25 Javascript
vue中使用[provide/inject]实现页面reload的方法
2019/09/30 Javascript
Vue 中 filter 与 computed 的区别与用法解析
2019/11/21 Javascript
在Debian下配置Python+Django+Nginx+uWSGI+MySQL的教程
2015/04/25 Python
在Mac OS上使用mod_wsgi连接Python与Apache服务器
2015/12/24 Python
Mac中升级Python2.7到Python3.5步骤详解
2017/04/27 Python
python操作MySQL 模拟简单银行转账操作
2017/09/27 Python
python实现飞机大战微信小游戏
2020/03/21 Python
Python django使用多进程连接mysql错误的解决方法
2018/10/08 Python
Numpy一维线性插值函数的用法
2020/04/22 Python
python中关于数据类型的学习笔记
2020/07/19 Python
机械制造与自动化应届生求职信
2013/11/16 职场文书
应用艺术专业个人的自我评价
2014/01/03 职场文书
中学生获奖感言
2014/02/04 职场文书
设立有限责任公司出资协议书
2014/11/01 职场文书
2014年幼儿园教研工作总结
2014/12/04 职场文书
平凡的世界读书笔记
2015/06/25 职场文书
爱国主题班会教案
2015/08/14 职场文书
《水浒传》读后感3篇(范文)
2019/09/19 职场文书
Golang生成Excel文档的方法步骤
2021/06/09 Golang