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 模拟JQuery的Ready方法实现并出现的问题
Dec 06 Javascript
IE6下出现JavaScript未结束的字符串常量错误的解决方法
Nov 21 Javascript
jquery调用wcf并展示出数据的方法
Jul 07 Javascript
JQuery中attr属性和jQuery.data()学习笔记【必看】
May 18 Javascript
详解Javascript几种跨域方式总结
Feb 27 Javascript
Bootstrap布局之栅格系统学习笔记
May 04 Javascript
微信小程序开发中的疑问解答汇总
Jul 03 Javascript
关于Vue背景图打包之后访问路径错误问题的解决
Nov 03 Javascript
用node开发并发布一个cli工具的方法步骤
Jan 03 Javascript
Vue实现的父组件向子组件传值功能示例
Jan 19 Javascript
Angular2使用SVG自定义图表(条形图、折线图)组件示例
May 10 Javascript
微信小程序之 catalog 切换实现解析
Sep 12 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 目录与文件处理-郑阿奇(续)
2011/07/04 PHP
php实现的获取网站备案信息查询代码(360)
2013/09/23 PHP
使用Discuz关键词服务器实现PHP中文分词
2014/03/11 PHP
支持生僻字且自动识别utf-8编码的php汉字转拼音类
2014/06/27 PHP
WAF的正确bypass
2017/01/05 PHP
用javascript实现点击链接弹出&quot;图片另存为&quot;而不是直接打开
2007/08/15 Javascript
jQuery autocomplate 自扩展插件、自动完成示例代码
2011/03/28 Javascript
ajax处理php返回json数据的实例代码
2013/01/24 Javascript
关于jQuery参考实例2.0 用jQuery选择元素
2013/04/07 Javascript
checkbox使用示例
2013/08/23 Javascript
浅析JavaScript中的类型和对象
2013/11/29 Javascript
jquery之别踩白块游戏的简单实现
2016/07/25 Javascript
NPM 安装cordova时警告:npm WARN deprecated minimatch@2.0.10: Please update to minimatch 3.0.2 or higher to
2016/12/20 Javascript
深入理解vue路由的使用
2017/03/24 Javascript
angularjs中回车键触发某一事件的方法
2017/04/24 Javascript
详解在vue-cli中引用jQuery、bootstrap以及使用sass、less编写css
2017/11/08 jQuery
[04:56]经典回顾:前Ehome 与 前LGD
2015/02/26 DOTA
Python 深入理解yield
2008/09/06 Python
把MySQL表结构映射为Python中的对象的教程
2015/04/07 Python
Python使用Mechanize模块编写爬虫的要点解析
2016/03/31 Python
python中对数据进行各种排序的方法
2019/07/02 Python
python集合常见运算案例解析
2019/10/17 Python
Python文本处理简单易懂方法解析
2019/12/19 Python
python3 Scrapy爬虫框架ip代理配置的方法
2020/01/17 Python
HTML5 Canvas实现玫瑰曲线和心形图案的代码实例
2014/04/10 HTML / CSS
Europcar比利时:租车
2019/08/26 全球购物
策划创业计划书
2014/02/06 职场文书
天猫某品牌专卖店运营计划书
2014/03/21 职场文书
国际经济与贸易专业求职信
2014/07/10 职场文书
初中毕业典礼演讲稿
2014/09/09 职场文书
旅游局领导班子“四风”问题对照检查材料思想汇报
2014/09/29 职场文书
导游词之临安白水涧
2019/11/05 职场文书
PHP实现rar解压读取扩展包小结
2021/06/03 PHP
用Python selenium实现淘宝抢单机器人
2021/06/18 Python
python数据可视化JupyterLab实用扩展程序Mito
2021/11/20 Python
MySQL Server 层四个日志
2022/03/31 MySQL