详解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 相关文章推荐
js相册效果代码(点击创建即可)
Apr 16 Javascript
jQuery封装的获取Url中的Get参数示例
Nov 26 Javascript
javaScript实现滚动新闻的方法
Jul 30 Javascript
基于JavaScript实现生成名片、链接等二维码
Sep 20 Javascript
javascript数组克隆简单实现方法
Dec 16 Javascript
easyui 中的datagrid跨页勾选问题的实现方法
Jan 18 Javascript
详解如何用VUE写一个多用模态框组件模版
Sep 27 Javascript
vue中轮训器的使用
Jan 27 Javascript
vue防止花括号{{}}闪烁v-text和v-html、v-cloak用法示例
Mar 13 Javascript
vue中typescript装饰器的使用方法超实用教程
Jun 17 Javascript
微信小程序监听用户登录事件的实现方法
Nov 11 Javascript
vue实现表格合并功能
Dec 01 Vue.js
微信小程序实现音频文件播放进度的实例代码
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下实现折线图效果的代码
2007/04/28 PHP
php实现统计邮件大小的方法
2013/08/06 PHP
php简单的留言板与回复功能具体实现
2014/02/19 PHP
php通过Chianz.com获取IP地址与地区的方法
2015/01/14 PHP
php 使用curl模拟登录人人(校内)网的简单实例
2016/06/06 PHP
PHP开发中csrf攻击的简单演示和防范
2017/05/07 PHP
关于scrollLeft,scrollTop的浏览器兼容性测试
2013/03/19 Javascript
输入自动提示搜索提示功能的javascript:sugggestion.js
2013/09/02 Javascript
jqueyr判断checkbox组的选中(示例代码)
2013/11/08 Javascript
jquery控制页面部分刷新的方法
2015/06/24 Javascript
全面解析Bootstrap表单使用方法(表单控件状态)
2015/11/24 Javascript
JS检测移动端横竖屏的代码
2016/05/30 Javascript
Input文本框随着输入内容多少自动延伸的实现
2017/02/15 Javascript
详解node中创建服务进程
2017/05/09 Javascript
AngularJS中的路由使用及实现代码
2017/10/09 Javascript
angularjs 的数据绑定实现原理
2018/07/02 Javascript
vue中使用百度脑图kityminder-core二次开发的实现
2019/09/26 Javascript
jquery实现掷骰子小游戏
2019/10/24 jQuery
使用node.JS中的url模块解析URL信息
2020/02/06 Javascript
python实现的二叉树算法和kmp算法实例
2014/04/25 Python
python查看列的唯一值方法
2018/07/17 Python
centos6.5安装python3.7.1之后无法使用pip的解决方案
2019/02/14 Python
Python学习笔记之lambda表达式用法详解
2019/08/08 Python
django自带调试服务器的使用详解
2019/08/29 Python
python实现根据给定坐标点生成多边形mask的例子
2020/02/18 Python
CSS3新增布局之: flex详解
2020/06/18 HTML / CSS
医疗保健专业人士购物网站:Scrubs & Beyond
2017/02/08 全球购物
德国购买门票网站:ADticket.de
2019/10/31 全球购物
高中自我鉴定范文
2013/11/03 职场文书
实习单位接收函
2014/01/11 职场文书
学生打架检讨书
2014/02/14 职场文书
计算机专业自荐信范文
2014/05/28 职场文书
学习党的群众路线教育实践活动心得体会范文
2014/11/03 职场文书
满月酒邀请函
2015/01/30 职场文书
小区保洁员岗位职责
2015/04/10 职场文书
Tomcat执行startup.bat出现闪退的原因及解决办法
2022/04/20 Servers