Vue中props的详解


Posted in Javascript onMay 16, 2019

看一下官方文档:

组件实例的作用域是孤立的。这意味着不能 (也不应该) 在子组件的模板内直接引用父组件的数据。父组件的数据需要通过 prop 才能下发到子组件中。

也就是props是子组件访问父组件数据的唯一接口。

详细一点解释就是:

一个组件可以直接在模板里面渲染data里面的数据(双大括号)。

子组件不能直接在模板里面渲染父元素的数据。

如果子组件想要引用父元素的数据,那么就在prop里面声明一个变量(比如a),这个变量就可以引用父元素的数据。然后在模板里渲染这个变量(前面的a),这时候渲染出来的就是父元素里面的数据。

1. 基本用法

Vue中props的详解

图1-props

<div id="app1">
    <!-- hello引用父元素的hello,它也可以引用message,greet,world等 -->
    <child :hello='hello'></child>
  </div>
  <script>
    var com1 = Vue.component('child',{
      // 声明在prop中的变量可以引用父元素的数据
      props:['hello'],
      // 这里渲染props中声明的那个hello
      template:'<div><p>{{ hello }}</p></div>',
    })
 
    var app1 = new Vue ({
      el: '#app1',
      data: {
        greet: {
          hello:'hello,',
          world: 'world',
        },
        message: 'message1',
      }
    })
  </script>

2. camelCase vs. kebab-case:js中用驼峰式命名,在html中替换成短横线分隔式命名

<!-- 在 HTML 中使用 kebab-case -->
<child my-message="hello!"></child>
 
<script>
  Vue.component('child', {
    // 在 JavaScript 中使用 camelCase
    props: ['myMessage'],
    template: '<span>{{ myMessage }}</span>'
  })
</script>

3.单向数据流: props是单向绑定的

当父组件的属性变化时,将传导给子组件,但是反过来不会。

每次父组件更新时,子组件的所有 prop 都会更新为最新值。

不要在子组件内部改变 prop。如果你这么做了,Vue 会在控制台给出警告。

在两种情况下,我们很容易忍不住想去修改 prop 中数据:

  1. Prop 作为初始值传入后,子组件想把它当作局部数据来用;
  2. Prop 作为原始数据传入,由子组件处理成其它数据输出。

对这两种情况,正确的应对方式是:
定义一个局部变量,并用 prop 的值初始化它:

props: ['initialCounter'],
  data: function () {
   return { counter: this.initialCounter }
  }

定义一个计算属性,处理 prop 的值并返回:

props: ['size'],
  computed: {
   normalizedSize: function () {
    return this.size.trim().toLowerCase()
   }
  }

注意在 JavaScript 中对象和数组是引用类型,指向同一个内存空间,如果 prop 是一个对象或数组,在子组件内部改变它会影响父组件的状态。

举个例子:

<div id="app3">
    <my-component :object='object'></my-component>
  </div>
  <script src="http://vuejs.org/js/vue.min.js"></script>
  <script>
    //
    var mycom = Vue.component('my-component', {
      //添加一个input改变子组件的childOject,那么父元素的object也会被改变,但是Vue没有报错!
      template: '<p>{{ object.name }} is {{ object.age }} years old.<br><input v-model="childObject.name" type="text"></p>',
      props: ['object','school'],
      data: function () {
        // 子组件的childObject 和 父组件的object 指向同一个对象
        return {
          childObject: this.object
        }
      }
    });
    var app3 = new Vue({
      el: '#app3',
      data: {
        object:{
          name: 'Xueying',
          age: '21',
        },
        school:'SCUT',
      },
    })
  </script>

Vue中props的详解

图2-改变childObject.name,object.name也改变

Vue中props的详解

图3-控制台输出app3.object.name

4. props验证

可以为prop指定验证规则,如果传入的数据不符合要求,Vue会发出警告。

具体验证规则见官方文档:Prop验证规则

5. $parent

$parent 也可以用来访问父组件的数据。

而且子组件可以通过$parent 来直接修改父组件的数据,不会报错!

可以使用props的时候,尽量使用props显式地传递数据(可以很清楚很快速地看出子组件引用了父组件的哪些数据)。

另外在一方面,直接在子组件中修改父组件的数据是很糟糕的做法,props单向数据流就没有这种顾虑了。

以上所述是小编给大家介绍的Vue中props的详解详解整合,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
学习YUI.Ext 第七天--关于View&amp;JSONView
Mar 10 Javascript
jquery 最简单的属性菜单
Oct 08 Javascript
JS俄罗斯方块,包含完整的设计理念
Dec 11 Javascript
js 字符串转换成数字的三种方法
Mar 23 Javascript
JQuery解析HTML、JSON和XML实例详解
Mar 29 Javascript
12个超实用的JQuery代码片段
Nov 02 Javascript
AngularJS页面访问时出现页面闪烁问题的解决
Mar 06 Javascript
基于jQuery倒计时插件实现团购秒杀效果
May 13 Javascript
AngularJS实现标签页的两种方式
Sep 05 Javascript
vue router动态路由下让每个子路由都是独立组件的解决方案
Apr 24 Javascript
vue基于element-ui的三级CheckBox复选框功能的实现代码
Oct 15 Javascript
vue video和vue-video-player实现视频铺满教程
Oct 30 Javascript
使用Vue实现移动端左滑删除效果附源码
May 16 #Javascript
Vue2.0实现组件之间数据交互和通信操作示例
May 16 #Javascript
Mpvue中使用Vant Weapp组件库的方法步骤
May 16 #Javascript
JS左右无缝轮播功能完整实例
May 16 #Javascript
Node.js Windows Binary二进制文件安装方法
May 16 #Javascript
详解mpvue中使用vant时需要注意的onChange事件的坑
May 16 #Javascript
详解如何搭建mpvue框架搭配vant组件库的小程序项目
May 16 #Javascript
You might like
php使用GeoIP库实例
2014/06/27 PHP
php实现的CSS更新类实例
2014/09/22 PHP
Laravel中前端js上传图片到七牛云的示例代码
2017/09/04 PHP
AngularJS入门教程之Hello World!
2014/12/06 Javascript
JavaScript将数组转换成CSV格式的方法
2015/03/19 Javascript
莱鸟介绍window.print()方法
2016/01/06 Javascript
JS实现1000以内被3或5整除的数字之和
2016/02/18 Javascript
JS敏感词过滤代码
2016/12/23 Javascript
JavaScript实现的原生态兼容IE6可调可控滚动文字功能详解
2017/09/19 Javascript
js 显示日期时间的实例(时间过一秒加1)
2017/10/25 Javascript
Js Snowflake(雪花算法)生成随机ID的实现方法
2020/08/26 Javascript
vue mvvm数据响应实现
2020/11/11 Javascript
[02:08]我的刀塔不可能这么可爱 胡晓桃_1
2014/06/20 DOTA
巧用Python装饰器 免去调用父类构造函数的麻烦
2012/05/18 Python
深入Python函数编程的一些特性
2015/04/13 Python
一键搞定python连接mysql驱动有关问题(windows版本)
2016/04/23 Python
python中使用%与.format格式化文本方法解析
2017/12/27 Python
Python WSGI的深入理解
2018/08/01 Python
Python OpenCV调用摄像头检测人脸并截图
2020/08/20 Python
FFT快速傅里叶变换的python实现过程解析
2019/10/21 Python
HTML5打开本地app应用的方法
2016/03/31 HTML / CSS
input元素的url类型和email类型简介
2012/07/11 HTML / CSS
RetroStage德国:复古服装
2019/02/03 全球购物
美国孩之宝玩具官网:Hasbro Pulse
2019/06/24 全球购物
生日派对邀请函
2014/01/13 职场文书
春季运动会广播稿大全
2014/02/19 职场文书
2014植树节活动总结
2014/03/11 职场文书
党员公开承诺书
2014/03/25 职场文书
经贸日语专业自荐信
2014/09/02 职场文书
医药公司采购员岗位职责
2014/09/12 职场文书
销售开票员岗位职责
2015/04/15 职场文书
本科毕业论文致谢词
2015/05/14 职场文书
Java如何实现树的同构?
2021/06/22 Java/Android
一文搞懂python异常处理、模块与包
2021/06/26 Python
什么是css原子化,有什么用?
2022/04/24 HTML / CSS
Web应用开发TypeScript使用详解
2022/05/25 Javascript