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 相关文章推荐
几个比较实用的JavaScript 测试及效验工具
Apr 18 Javascript
关于javascript function对象那些迷惑分析
Oct 24 Javascript
js弹出模式对话框,并接收回传值的方法
Mar 12 Javascript
javascript表单处理具体实现代码(表单、链接、按钮)
May 07 Javascript
jquery弹出框插件jquery.ui.dialog用法分析
Aug 20 Javascript
简单实现js浮动框
Dec 13 Javascript
javascript实现延时显示提示框效果
Jun 01 Javascript
JavaScript实现鼠标滚轮控制页面图片切换功能示例
Oct 14 Javascript
vue仿淘宝订单状态的tab切换效果
Jun 23 Javascript
JavaScript原型对象、构造函数和实例对象功能与用法详解
Aug 04 Javascript
vue路由传参的基本实现方式小结【三种方式】
Feb 05 Javascript
基于原生js实现九宫格算法代码实例
Jul 03 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生成制作验证码的简单实例
2016/06/12 PHP
Yii遍历行下每列数据的方法
2016/10/17 PHP
PHP/ThinkPHP实现批量打包下载文件的方法示例
2017/07/31 PHP
如何修改Laravel中url()函数生成URL的根地址
2017/08/11 PHP
PHP获取链表中倒数第K个节点的方法
2018/01/18 PHP
Laravel获取当前请求的控制器和方法以及中间件的例子
2019/10/11 PHP
JavaScript 一道字符串分解的题目
2011/08/03 Javascript
js解析与序列化json数据(三)json的解析探讨
2013/02/01 Javascript
js文件缓存之版本管理详解
2013/07/05 Javascript
模拟用户点击弹出新页面不会被浏览器拦截
2014/04/08 Javascript
两个多选select(multiple左右)添加、删除选项和取值实例
2014/05/12 Javascript
SuperSlide标签切换、焦点图多种组合插件
2015/03/14 Javascript
Javascript基于对象三大特性(封装性、继承性、多态性)
2016/01/04 Javascript
基于Bootstrap使用jQuery实现输入框组input-group的添加与删除
2016/05/03 Javascript
nodejs获取微信小程序带参数二维码实现代码
2017/04/12 NodeJs
es6在react中的应用代码解析
2017/11/08 Javascript
React-Router如何进行页面权限管理的方法
2017/12/06 Javascript
使用watch监听路由变化和watch监听对象的实例
2018/02/24 Javascript
Angular4.x通过路由守卫进行路由重定向实现根据条件跳转到相应的页面(推荐)
2018/05/10 Javascript
浅析Vue.js中v-bind v-model的使用和区别
2018/12/04 Javascript
python paramiko实现ssh远程访问的方法
2013/12/03 Python
Python简单日志处理类分享
2015/02/14 Python
python自动化生成IOS的图标
2018/11/13 Python
简单了解django处理跨域请求最佳解决方案
2020/03/25 Python
Python matplotlib实时画图案例
2020/04/23 Python
HTML5 语义化结构化规范化
2008/10/17 HTML / CSS
Links of London官方网站:英国标志性的珠宝品牌
2017/04/09 全球购物
美国时尚孕妇装品牌:A Pea in the Pod
2017/07/16 全球购物
Guess欧洲官网:美国服饰品牌
2019/08/06 全球购物
事假请假条范文
2014/04/11 职场文书
小学学雷锋活动总结
2014/04/25 职场文书
校园环保建议书
2014/05/14 职场文书
四查四看整改措施
2014/09/19 职场文书
2014县委书记四风对照检查材料思想汇报
2014/09/21 职场文书
教师听课学习心得体会
2016/01/15 职场文书
分享一些Java的常用工具
2021/06/11 Java/Android