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 相关文章推荐
jquery1.10给新增元素绑定事件的方法
Mar 06 Javascript
js实现简单的联动菜单效果
Aug 19 Javascript
JS数组排序技巧汇总(冒泡、sort、快速、希尔等排序)
Nov 24 Javascript
bootstrap-wysiwyg结合ajax实现图片上传实时刷新功能
May 27 Javascript
JS阻止事件冒泡行为和闭包的方法
Jun 16 Javascript
vue使用drag与drop实现拖拽的示例代码
Sep 07 Javascript
不使用 JS 匿名函数理由
Nov 17 Javascript
浅谈webpack SplitChunksPlugin实用指南
Sep 17 Javascript
js中arguments对象的深入理解
May 14 Javascript
nuxt框架中对vuex进行模块化设置的实现方法
Sep 06 Javascript
JS通过识别id、value值对checkbox设置选中状态
Feb 19 Javascript
javascript将16进制的字符串转换为10进制整数hex
Mar 05 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 将bmp图片转为jpg等其他任意格式的图片
2009/06/21 PHP
Ping服务的php实现方法,让网站快速被收录
2012/02/04 PHP
set_include_path和get_include_path使用及注意事项
2013/02/02 PHP
基于php常用正则表达式的整理汇总
2013/06/08 PHP
PHP下的Oracle客户端扩展(OCI8)安装教程
2014/09/10 PHP
浅谈laravel orm 中的一对多关系 hasMany
2019/10/21 PHP
新手入门常用代码集锦
2007/01/11 Javascript
弹出广告特效代码(一个IP只弹出一次)
2007/05/11 Javascript
Javascript中Eval函数的使用
2010/03/23 Javascript
jQuery 常用代码集锦(必看篇)
2016/05/16 Javascript
Bootstrap栅格系统的使用详解
2017/10/30 Javascript
sublime text配置node.js调试(图文教程)
2017/11/23 Javascript
JS实现的集合去重,交集,并集,差集功能示例
2018/03/13 Javascript
使用淘宝镜像cnpm安装Vue.js的图文教程
2018/05/17 Javascript
Vue 事件处理操作实例详解
2019/03/05 Javascript
微信小程序实现发送模板消息功能示例【通过openid推送消息给用户】
2019/05/05 Javascript
Vue.js组件实现选项卡以及切换特效
2019/07/24 Javascript
node获取客户端ip功能简单示例
2019/08/24 Javascript
ElementUI多个子组件表单的校验管理实现
2019/11/07 Javascript
详解Python中的Numpy、SciPy、MatPlotLib安装与配置
2017/11/17 Python
在unittest中使用 logging 模块记录测试数据的方法
2018/11/30 Python
python3 批量获取对应端口服务的实例
2019/07/25 Python
Python MongoDB 插入数据时已存在则不执行,不存在则插入的解决方法
2019/09/24 Python
python隐藏类中属性的3种实现方法
2019/12/19 Python
Python导入数值型Excel数据并生成矩阵操作
2020/06/09 Python
Hotels.com南非:酒店预订
2017/11/02 全球购物
英国最大的婴儿监视器网上商店:Baby Monitors Direct
2018/04/24 全球购物
西安启天科技有限公司网络工程师面试题笔试题
2016/06/12 面试题
客服文员岗位职责
2013/11/29 职场文书
幼儿教师工作感言
2014/02/14 职场文书
自考毕业自我鉴定
2014/03/18 职场文书
好员工观后感
2015/06/17 职场文书
六一亲子活动感想
2015/08/07 职场文书
银行柜员优质服务心得体会
2016/01/22 职场文书
Python图片处理之图片裁剪教程
2021/05/27 Python
Java十分钟精通进阶适配器模式
2022/04/06 Java/Android