详解Vue中的Props与Data细微差别


Posted in Javascript onMarch 02, 2020

Vue提供了两种不同的存储变量:props和data。

这些方法一开始可能会让人感到困惑,因为它们做的事情很相似,而且也不清楚什何时使用props,何时使用data。

那么props和data有什么区别呢?

data是每个组件的私有内存,可以在其中存储需要的任何变量。props是将数据从父组件传递到子组件的方式。

在本文中,我们将学习到:

  • 什么是props,为什么这些数据只向下流动,而不是向上
  • data 选项的用途
  • 响应式是什么
  • 如何避免 props 和 data 之间的命名冲突
  • 如何将 props 和 data 结合使用

什么是 props

在Vue中,props(或properties)是我们将数据从父组件向下传递到其子组件的方式。

当我们使用组件构建应用程序时,最终会构建一个称为树的数据结构。 类似于家谱,具有:

  • 父母
  • 孩子
  • 祖先
  • 子孙

数据从根组件(位于最顶端的组件)沿着树向下流动。就像基因是如何代代相传的一样,父组件也会将自己的props传给了他们的孩子。

在Vue中,我们在代码的<template>中向组件添加了一些props

<template>
 <my-component cool-prop="hello world"></my-component>
</template>

在这个例子中,我们传递一个名为color-prop prop,其值为“hello world”。我们能够从my-component内部访问这个值。

然而,当我们从组件内部访问props时,我们并不拥有它们,所以我们不能更改它们(就像你不能改变你父母给你的基因一样)。

注意:虽然可以更改组件中的属性,但这是一个非常糟糕的主意。最终还会更改父类正在使用的值,这可能会导致很多混淆。
但是有些情况我们需要改变变量,所以 data 就派上用场了。

什么是 data ?

data是每个组件的内存,这是存储数据和希望跟踪的任何其他变量的地方。

如果我们正在构建一个计数器应用程序,我们将需要跟踪计数,因此我们将向我们的data添加一个count:

<template>
 <div>
 {{ count }}
 <button @click="increment">+</button>
 <button @click="decrement">-</button>
 </div>
</template>
------------------------------------------
export default {
 name: 'Counter',
 data() {
 return {
  // Initialized to zero to begin
  count: 0,
 }
 },
 methods: {
 increment() {
  this.count += 1;
 },
 decrement() {
  this.count -= 1;
 }
 }
}

此处的data是私有的,仅供组件本身使用,其他组件不能访问它。

注意:理论上是其它组件是不能访问这些数据,但实际是可以的。但是出于同样的原因,这样做是非常糟糕的
如果需要向组件传递数据,可以使用props向下传递数据(传递给子组件),或者使用事件向上传递数据(传递给父组件)。

props 和 data 都是响应式的

使用 Vue,我们不需要过多地考虑组件什么时候会更新,Vue 会自动帮我们做好,因为 Vue 是响应式的。

我们不必每次更改 data 都调用setState,只需更改data即可! 只要要更新具有响应式的属性(props,computed 及 data 中的任何值),Vue 就会知道它何时发生变化。

回到计数器应用程序,我们仔细看看这里面的方法

methods: {
 increment() {
 this.count += 1;
 },
 decrement() {
 this.count -= 1;
 }
}

我们所要做的就是更新count,Vue 会检测到这个变化,然后用新值重新渲染我们的应用程序

Vue 的响应系统有很多细微的差别,如果你想要高效地使用Vue,理解它是非常重要的。如果你想更深入地了解Vue的响应系统,这里有更多要了解的东西。

避免命名冲突

Vue所做的另一件事是,使开发工作变得更好一点。

我们在组件上定义一些 props 和 data

export default {
 props: ['propA', 'propB'],
 data() {
 return {
  dataA: 'hello',
  dataB: 'world',
 };
 },
};

如果要在方法内部访问它们,则不必使用this.props.propA或this.data.dataA。 Vue 让我们完全省略了 props 和 dasta,只剩下了更整洁的代码。

我们可以使用this.propA或this.dataA访问它们:

methods: {
 coolMethod() {
 // Access a prop
 console.log(this.propA);

 // Access our data
 console.log(this.dataA);
 }
}

因此,如果我们不小心在data和 props中使用相同的名称,则会遇到问题。

如果发生这种情况,Vue 会给你一个警告,因为它不知道你想访问哪个。

export default {
 props: ['secret'],
 data() {
 return {
  secret: '1234',
 };
 },
 methods: {
 printSecret() {
  // 我们想要哪一个?
  console.log(this.secret);
 }
 }
};

当我们同时使用props和data时,Vue 的神奇之处就产生了。

props 和 data 一起使用

既然我们已经看到了 props 和 data 的不同之处,让我们来看看为什么我们需要两个,通过建立一个基本的应用程序。

我们将使用名为ContactInfo的组件显示此信息:

// ContactInfo
<template>
 <div class="container">
 <div class="row">
  Email: {{ emailAddress }}
  Twitter: {{ twitterHandle }}
  Instagram: {{ instagram }}
 </div>
 </div>
</template>
-------------------------------------
export default {
 name: 'ContactInfo',
 props: ['emailAddress', 'twitterHandle', 'instagram'],
};

ContactInfo组件接受 props:emailAddress,twitterHandle和instagram,并将其显示在页面上。

我们的个人资料页面组件ProfilePage如下所示:

// ProfilePage
<template>
 <div class="profile-page">
 <div class="avatar">
  <img src="user.profilePicture" />
  {{ user.name }}
 </div>
 </div>
</template>
-------------------------------------------------
export default {
 name: 'ProfilePage',
 data() {
 return {
  // In a real app we would get this data from a server
  user: {
  name: 'John Smith',
  profilePicture: './profile-pic.jpg',
  emailAddress: 'john@smith.com',
  twitterHandle: 'johnsmith',
  instagram: 'johnsmith345',
  },
 }
 }
};

我们的ProfilePage组件目前显示用户的配置文件图片及其名称,它还有用户数据对象。

我们如何从父组件(ProfilePage)向下获取数据到子组件(ContactInfo)

我们必须使用 props 传递数据。

首先,我们需要将ContactInfo组件导入ProfilePage组件

// Import the component
import ContactInfo from './ContactInfo.vue';

export default {
 name: 'ProfilePage',

 // Add it as a dependency
 components: {
 ContactInfo,
 },

 data() {
 return {
  user: {
  name: 'John Smith',
  profilePicture: './profile-pic.jpg',
  emailAddress: 'john@smith.com',
  twitterHandle: 'johnsmith',
  instagram: 'johnsmith345',
  },
 }
 }
};

其次,我们必须在<template>中添加组件:

// ProfilePage
<template>
 <div class="profile-page">
 <div class="avatar">
  <img src="user.profilePicture" />
  {{ user.name }}
 </div>

 <!-- Add component in with props -->
 <contact-info
  :email-address="emailAddress"
  :twitter-handle="twitterHandle"
  :instagram="instagram"
 />

 </div>
</template>

现在ContactInfo需要的所有用户数据都将沿着组件树向下流动,并从ProfilePage进入ContactInfo。

我们将数据保存在ProfilePage而不是ContactInfo中的原因是ProfilePage页面的其他部分需要访问user对象。

由于数据只向下流,这意味着我们必须将数据放在组件树中足够高的位置,以便它可以向下流到需要去的所有位置。

原文:https://medium.com/js-dojo/vue-data-flow-how-it-works-3ff316a7ffcd

PS:vue中把props中的值赋值给data

父组件:

<template>
 <div>
 <navbar :ctype="ctype"></navbar>
 </div>
</template>

<script>
import navbar from '@/components/navbar'
  export default {
  components: {navbar},
  data () {
   return{
   ctype:1
   }
  }
  }
</script>

子组件:

<template>
 <div>
 <div>{{thistype}}</div>
 </div>
</template>

<script>
export default {
  props:['ctype'],
  computed: {
   normalizedSize: function () {
    return this.ctype.trim().toLowerCase()
   }
  },
  data(){
    return{
      thistype:this.ctype
    }
  }
}
</script>

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
小议Function.apply() 之一------(函数的劫持与对象的复制)
Nov 30 Javascript
单独使用CKFinder选择图片的方法
Aug 21 Javascript
jquery动画4.升级版遮罩效果的图片走廊--带自动运行效果
Aug 24 Javascript
微信小程序 input输入框详解及简单实例
Jan 10 Javascript
Vue数据驱动模拟实现4
Jan 12 Javascript
JS全角与半角转化实例(分享)
Jul 04 Javascript
浅谈Express异步进化史
Sep 09 Javascript
详解Node.js中path模块的resolve()和join()方法的区别
Oct 29 Javascript
最简单的vue消息提示全局组件的方法
Jun 16 Javascript
vue中使用v-model完成组件间的通信
Aug 22 Javascript
解决Vue中的生命周期beforeDestory不触发的问题
Jul 21 Javascript
基于JavaScript实现随机点名器
Feb 25 Javascript
微信小程序实现音频文件播放进度的实例代码
Mar 02 #Javascript
不刷新网页就能链接新的js文件方法总结
Mar 01 #Javascript
vue学习笔记之slot插槽用法实例分析
Feb 29 #Javascript
vue学习笔记之Vue中css动画原理简单示例
Feb 29 #Javascript
Vue组件化开发之通用型弹出框的实现
Feb 28 #Javascript
在vue项目实现一个ctrl+f的搜索功能
Feb 28 #Javascript
Js实现复选框的全选、全不选反选功能代码实例
Feb 28 #Javascript
You might like
Php部分常见问题总结
2006/10/09 PHP
php的socket编程详解
2016/11/20 PHP
获取DOM对象的几种扩展及简写
2006/10/09 Javascript
jquery 学习之二 属性 文本与值(text,val)
2010/11/25 Javascript
jquery插件制作教程 txtHover
2012/08/17 Javascript
jQuery实现DIV层淡入淡出拖动特效的方法
2015/02/13 Javascript
JS获取Table中td值的方法
2015/03/19 Javascript
JSON字符串和JSON对象相互转化实例详解
2017/01/05 Javascript
JavaScript解析JSON格式数据的方法示例
2017/01/24 Javascript
jQuery实现jQuery-form.js实现异步上传文件
2017/04/28 jQuery
jQuery Ajax自定义分页组件(jquery.loehpagerv1.0)实例详解
2017/05/01 jQuery
微信小程序日历组件calendar详解及实例
2017/06/08 Javascript
jQuery实现鼠标移入移出事件切换功能示例
2018/09/06 jQuery
jQuery实现为table表格动态添加或删除tr功能示例
2019/02/19 jQuery
使用vue开发移动端管理后台的注意事项
2019/03/07 Javascript
详解Vue-cli3 项目在安卓低版本系统和IE上白屏问题解决
2019/04/14 Javascript
Vue Components 数字键盘的实现
2019/09/18 Javascript
vue css 引入asstes中的图片无法显示的四种解决方法
2020/03/16 Javascript
VUE页面中通过双击实现复制表格中内容的示例代码
2020/06/11 Javascript
JavaScript中的执行环境和作用域链
2020/09/04 Javascript
使用Pyrex来扩展和加速Python程序的教程
2015/04/13 Python
Python代码缩进和测试模块示例详解
2018/05/07 Python
Python创建一个空的dataframe,并循环赋值的方法
2018/11/08 Python
解决安装python3.7.4报错Can''t connect to HTTPS URL because the SSL module is not available
2019/07/31 Python
python UIAutomator2使用超详细教程
2021/02/19 Python
丝芙兰波兰:Sephora.pl
2018/03/25 全球购物
StubHub中国:购买和出售全球活动门票
2020/01/01 全球购物
Pamela Love官网:纽约设计师Pamela Love的精美、时尚和穿孔珠宝
2020/10/19 全球购物
鲜果饮品店创业计划书
2014/01/21 职场文书
大型主题婚礼活动策划方案
2014/09/15 职场文书
广告设计专业毕业生自我鉴定
2014/09/27 职场文书
领导班子四风查摆对照检查材料思想汇报
2014/10/05 职场文书
2014年社区工会工作总结
2014/12/18 职场文书
劳动仲裁调解书
2015/05/20 职场文书
小学生大队委竞选稿
2015/11/20 职场文书
导游经典开场白——导游词
2019/04/17 职场文书