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 相关文章推荐
Js 订制自己的AlertBox(信息提示框)
Jan 09 Javascript
js确认删除对话框适用于a标签及submit
Jul 10 Javascript
JavaScript获取function所有参数名的方法
Oct 30 Javascript
基于Jquery插件Uploadify实现实时显示进度条上传图片
Mar 26 Javascript
工作中常用到的ES6语法
Sep 04 Javascript
微信小程序下拉刷新PullDownRefresh的使用方法
Nov 29 Javascript
微信小程序实现图片选择并预览功能
Jul 25 Javascript
JS/CSS实现字符串单词首字母大写功能
Sep 03 Javascript
jQuery实现全选、反选和不选功能的方法详解
Dec 04 jQuery
JavaScript find()方法及返回数据实例
Apr 30 Javascript
vue+iview框架实现左侧动态菜单功能的示例代码
Jul 23 Javascript
vue设置默认首页的操作
Aug 12 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 在5.1.* 和5.2.*之间 PDO数据库操作中的不同之处小结
2012/03/07 PHP
PHP正则提取不包含指定网址的图片地址的例子
2014/04/21 PHP
Thinkphp+smarty+uploadify实现无刷新上传
2015/07/30 PHP
Symfony2获取web目录绝对路径、相对路径、网址的方法
2016/11/14 PHP
Zend Framework使用Zend_Loader组件动态加载文件和类用法详解
2016/12/09 PHP
关于PHP内置的字符串处理函数详解
2017/02/04 PHP
php中html_entity_decode实现HTML实体转义
2018/06/13 PHP
php 后端实现JWT认证方法示例
2018/09/04 PHP
Google 静态地图API实现代码
2010/11/19 Javascript
JavaScript子窗口ModalDialog中操作父窗口对像
2012/12/11 Javascript
禁用页面部分JavaScript不是全部而是部分
2014/09/03 Javascript
CSS javascript 结合实现悬浮固定菜单效果
2015/08/23 Javascript
如何解决ligerUI布局时Center中的Tab高度大小
2015/11/24 Javascript
js实现图片无缝滚动特效
2020/03/19 Javascript
vue-cli的webpack模板项目配置文件分析
2017/04/01 Javascript
原生javascript实现的全屏滚动功能示例
2017/09/19 Javascript
jQuery简单实现向列表动态添加新元素的方法示例
2017/12/25 jQuery
Vue.js实现图片的随意拖动方法
2018/03/08 Javascript
详解JS取出两个数组中的不同或相同元素
2019/03/20 Javascript
Vue基于iview table展示图片实现点击放大
2020/08/05 Javascript
在vue项目中封装echarts的步骤
2020/12/25 Vue.js
[03:17]2016完美“圣”典风云人物:冷冷专访
2016/12/08 DOTA
[04:05]TI9战队采访 - Natus Vincere
2019/08/22 DOTA
教你用Type Hint提高Python程序开发效率
2016/08/08 Python
Python 判断文件或目录是否存在的实例代码
2018/07/19 Python
Python3最长回文子串算法示例
2019/03/04 Python
python爬虫 urllib模块发起post请求过程解析
2019/08/20 Python
20行Python代码实现视频字符化功能
2020/04/13 Python
详解如何通过H5(浏览器/WebView/其他)唤起本地app
2017/12/11 HTML / CSS
完整版商业计划书
2014/09/15 职场文书
高校师德师风自我剖析材料
2014/09/29 职场文书
2014年机关作风建设工作总结
2014/10/23 职场文书
个人工作违纪检讨书
2015/05/05 职场文书
2016年大学光棍节活动总结
2016/04/05 职场文书
手写实现JS中的new
2021/11/07 Javascript
微信小程序调用python模型
2022/04/21 Python