Vuejs 组件——props数据传递的实例代码


Posted in Javascript onMarch 07, 2017

本篇资料来于官方文档:http://cn.vuejs.org/guide/components.html#Props

本文是在官方文档的基础上,更加细致的说明,代码更多更全。

简单来说,更适合新手阅读

props数据传递

①组件实例的作用域:

是孤立的,简单的来说,组件和组件之间,即使有同名属性,值也不共享。

<div id="app"> 
  <add></add> 
  <del></del> 
</div> 
<script> 
  var vm = new Vue({ 
    el: '#app', 
    components: { 
      "add": { 
        template: "<button>btn:{{btn}}</button>", 
        data: function () { 
          return {btn: "123"}; 
        } 
      }, 
      del: { 
        template: "<button>btn:{{btn}}</button>", 
        data: function () { 
          return {btn: "456"}; 
        } 
      } 
    } 
  }); 
</script>

渲染结果是:

2个按钮,第一个的值是123,第二个的值是456(虽然他们都是btn)

②使用props绑定静态数据:

【1】这种方法用于传递字符串,且值是写在父组件自定义元素上的。

【2】下面示例中的写法,不能传递父组件data属性中的值

【3】会覆盖模板的data属性中,同名的值。

示例代码:

<div id="app"> 
  <add btn="h"></add> 
</div> 
<script> 
  var vm = new Vue({ 
    el: '#app', 
    data: { 
      h: "hello" 
    }, 
    components: { 
      "add": { 
        props: ['btn'], 
        template: "<button>btn:{{btn}}</button>", 
        data: function () { 
          return {btn: "123"}; 
        } 
      } 
    } 
  }); 
</script>

这种写法下,btn的值是h,而不是123,或者是hello。

【4】驼峰写法

假如插值是驼峰式的,而在html标签中,由于html的特性是不区分大小写(比如LI和li是一样的),因此,html标签中要传递的值要写成短横线式的(如btn-test),以区分大小写。

而在props的数组中,应该和插值保持一致,写成驼峰式的(如btnTest)。

例如:

props: ['btnTest'], 
template: "<button>btn:{{btnTest}}</button>",

正确的写法:

<add btn-test="h"></add>

假如插值写短横线式,或者是html标签写成驼峰式,都不能正常生效。(除非插值不写成驼峰式——跳过大小写的限制,才可以)

③利用props绑定动态数据:

简单来说,就是让子组件的某个插值,和父组件的数据保持一致。

标准写法是(利用v-bind):

<add v-bind:子组件的值="父组件的属性"></add>

如代码

<div id="app"> 
  <add v-bind:btn="h"></add> 
</div> 
<script> 
  var vm = new Vue({ 
    el: '#app', 
    data: { 
      h: "hello" 
    }, 
    components: { 
      "add": { 
        props: ['btn'], 
        template: "<button>btn:{{btn}}</button>", 
        data: function () { 
          return {'btn': "123"}; //子组件同名的值被覆盖了 
        } 
      } 
    } 
  }); 
</script>

说明:

【1】btn使用的父组件data中 h的值;

【2】子组件的data的函数中返回值被覆盖了。

【3】也就是说,使用v-bind的是使用父组件的值(根据属性名),没有使用v-bind的是将标签里的数值当做字符串来使用。

【4】依然需要使用props,否则他会取用自己data里的btn的值

④字面量和动态语法:

【1】简单来说,不加v-bind的,传递的是字面量,即当做字符串(例如1也是字符串,而不是number类型);

【2】加上v-bind的,传递的是JS表达式(因此才能传递父组件的值);

【3】加上v-bind后,如果能找到父组件的值,那么使用父组件的值;如果没有对应的,则将其看做一个js表达式(例如1+2看做3,{a:1}看做是一个对象);

如代码:

<div id="app"> 
  <add v-bind:btn="1+2"></add> 
</div> 
<script> 
  var vm = new Vue({ 
    el: '#app', 
    data: { 
      h: "hello" 
    }, 
    components: { 
      "add": { 
        props: ['btn'], 
        template: "<button>btn:{{btn}}</button>" 
      } 
    } 
  }); 
</script>

这里的btn的值是3(而不是没有加v-bind时,作为字符串的1+2)

⑤props的绑定类型:

【1】简单来说,分为两种类型,即单向绑定(父组件能影响子组件,但相反不行)和双向绑定(子组件也能影响父组件);

【2】单向绑定示例:(默认,或使用.once)

<div id="app"> 
  父组件: 
  <input v-model="val"><br/> 
  子组件: 
  <test v-bind:test-Val="val"></test> 
</div> 
<script> 
  var vm = new Vue({ 
    el: '#app', 
    data: { 
      val: 1 
    }, 
    components: { 
      "test": { 
        props: ['testVal'], 
        template: "<input v-model='testVal'/>" 
      } 
    } 
  }); 
</script>

说明:

当父组件的值被更改后,子组件的值也随之更改;

当子组件的值被更改后,父组件的值不会变化,而假如再次修改父组件的值,子组件会再次同步。

另外需要注意的是,子组件如果要同步绑定,那么子组件的input需要是v-model,而不能是value属性(那样只能单项绑定,且修改子组件的值后会失去绑定)

【3】双向绑定:

需要使用“.sync”作为修饰词

如示例:

<div id="app"> 
  父组件: 
  <input v-model="val"><br/> 
  子组件: 
  <test :test.sync="val"></test> 
</div> 
<script> 
  var vm = new Vue({ 
    el: '#app', 
    data: { 
      val: 1 
    }, 
    components: { 
      "test": { 
        props: ['test'], 
        template: "<input v-model='test'/>" 
      } 
    } 
  }); 
</script>

效果是无论你改哪一个的值,另外一个都会随之变动。

【4】props验证:

简单来说,当组件获取数据时,进行验证,只有符合条件的时候,才会使用之。

写法是将props变为一个对象,被验证是值是对象的key,验证条件是和key对应的value。

例如:

props: { 
  test: { 
    twoWay: true 
  } 
},

验证test这个变量是不是双向绑定,如果不是,则报错。(注意,这个不能用于验证单向绑定)。

示例代码如下:

<div id="app"> 
  父组件: 
  <input v-model="val"><br/> 
  子组件: 
  <test :test="val"></test> 
</div> 
<script> 
  var vm = new Vue({ 
    el: '#app', 
    data: { 
      val: 1 
    }, 
    components:{ 
      test:{ 
        props: { 
          test: { 
            twoWay: true 
          } 
        }, 
        template: "<input v-model='test'/>" 
      } 
    } 
  }); 
</script>

更多验证类型请查看官方教程:http://cn.vuejs.org/guide/components.html#Prop__u9A8C_u8BC1

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

Javascript 相关文章推荐
Javascript学习笔记1 数据类型
Jan 11 Javascript
简略的前端架构心得&amp;&amp;基于editor为例子的编码小技巧
Nov 25 Javascript
再论Javascript的类继承
Mar 05 Javascript
js实现在页面上弹出蒙板技巧简单实用
Apr 16 Javascript
js在输入框屏蔽按键,只能键入数字的示例代码
Jan 03 Javascript
导入extjs、jquery 文件时$使用冲突问题解决方法
Jan 14 Javascript
js类型转换与引用类型详解(Boolean_Number_String)
Mar 07 Javascript
Extjs grid添加一个图片状态或者按钮的方法
Apr 03 Javascript
jquery专业的导航菜单特效代码分享
Aug 29 Javascript
微信小程序  TLS 版本必须大于等于1.2问题解决
Feb 22 Javascript
详解vue-cli中配置sass
Jun 21 Javascript
antd组件Upload实现自己上传的实现示例
Dec 18 Javascript
js实现百度登录框鼠标拖拽效果
Mar 07 #Javascript
Vue获取DOM元素样式和样式更改示例
Mar 07 #Javascript
原生JavaScript实现Tooltip浮动提示框特效
Mar 07 #Javascript
基于JavaScript实现图片剪切效果
Mar 07 #Javascript
详解Vue2 无限级分类(添加,删除,修改)
Mar 07 #Javascript
js放到head中失效的原因与解决方法
Mar 07 #Javascript
Bootstrap媒体对象学习使用
Mar 07 #Javascript
You might like
解析php如何将日志写进syslog
2013/06/28 PHP
php日历制作代码分享
2014/01/20 PHP
Yii中render和renderPartial的区别
2014/09/03 PHP
php实现TCP端口检测的方法
2015/04/01 PHP
PHP 返回13位时间戳的实现代码
2016/05/13 PHP
php实现HTML实体编号与非ASCII字符串相互转换类实例
2016/11/02 PHP
yii2.0整合阿里云oss删除单个文件的方法
2017/09/19 PHP
理解JavaScript中的事件
2006/09/23 Javascript
JavaScript prototype对象的属性说明
2010/03/13 Javascript
js倒计时小程序
2013/11/05 Javascript
jquery.ui.draggable中文文档(原文翻译)
2013/11/15 Javascript
JS特效实现图片自动播放并可控的效果
2015/07/31 Javascript
AngularJS基础 ng-keyup 指令简单示例
2016/08/02 Javascript
Bootstrap中点击按钮后变灰并显示加载中实例代码
2016/09/23 Javascript
基于Vue.js实现简单搜索框
2020/03/26 Javascript
超全面的JavaScript开发规范(推荐)
2017/01/21 Javascript
Bootstrap 下拉多选框插件Bootstrap Multiselect
2017/01/22 Javascript
jQuery.cookie.js实现记录最近浏览过的商品功能示例
2017/01/23 Javascript
微信小程序仿今日头条导航栏滚动解析
2019/08/20 Javascript
微信小程序全局变量的设置、使用、修改过程解析
2019/09/24 Javascript
Vue插槽_特殊特性slot,slot-scope与指令v-slot说明
2020/09/04 Javascript
python中正则表达式的使用详解
2014/10/17 Python
Python实现简单的代理服务器
2015/07/25 Python
Python for Informatics 第11章之正则表达式(四)
2016/04/21 Python
python实现扫描日志关键字的示例
2018/04/28 Python
python获取当前文件路径以及父文件路径的方法
2019/07/10 Python
Pandas 缺失数据处理的实现
2019/11/04 Python
Python获取指定网段正在使用的IP
2020/12/14 Python
数以千计的折扣工业产品:ESE Direct
2018/05/20 全球购物
致长跑运动员广播稿
2014/01/31 职场文书
2014年人事行政工作总结
2014/12/03 职场文书
因公司原因离职的辞职信范文
2015/05/12 职场文书
离婚案件上诉状
2015/05/23 职场文书
张思德观后感
2015/06/09 职场文书
汤姆索亚历险记读书笔记
2015/06/29 职场文书
春节随笔
2015/08/15 职场文书