详解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 相关文章推荐
基于jquery的inputlimiter 实现字数限制功能
May 30 Javascript
js获取php变量的实现代码
Aug 10 Javascript
jquery-syntax动态语法着色示例代码
May 14 Javascript
Jquery $.getJSON 在IE下的缓存问题解决方法
Oct 10 Javascript
JavaScript中的Math.SQRT1_2属性使用简介
Jun 14 Javascript
jquery实现可横向和竖向展开的动态下滑菜单效果
Aug 24 Javascript
BootStrap学习笔记之nav导航栏和面包屑导航
Jan 03 Javascript
jQuery实现选中行变色效果(实例讲解)
Jul 06 jQuery
Vue组件通信实践记录(推荐)
Aug 15 Javascript
实例讲解JavaScript截取字符串
Nov 30 Javascript
JavaScript如何利用Promise控制并发请求个数
May 14 Javascript
JavaScript中document.activeELement焦点元素介绍
Nov 27 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 程序员的调试技术小结
2009/11/15 PHP
php中simplexml_load_file函数用法实例
2014/11/12 PHP
WIFI万能钥匙密码查询接口实例
2015/09/28 PHP
完美解决phpdoc导出文档中@package的warning及Error的错误
2016/05/17 PHP
Laravel 5.4.36中session没有保存成功问题的解决
2018/02/19 PHP
JavaScript类库D
2010/10/24 Javascript
js字符编码函数区别分析
2011/12/28 Javascript
获得Javascript对象属性个数的示例代码
2013/11/21 Javascript
node.js中的events.emitter.removeListener方法使用说明
2014/12/10 Javascript
javascript实现删除前弹出确认框
2015/06/04 Javascript
解析javascript瀑布流原理实现图片滚动加载
2016/03/10 Javascript
jQuery将表单序列化成一个Object对象的实例
2016/11/29 Javascript
JS获取鼠标位置距浏览器窗口距离的方法示例
2017/04/11 Javascript
jQuery输入框密码的显示隐藏【代码分享】
2017/04/29 jQuery
BootStrap Table实现server分页序号连续显示功能(当前页从上一页的结束序号开始)
2017/09/12 Javascript
浅谈AngularJS中使用$resource(已更新)
2017/09/14 Javascript
JavaScript使用math.js进行精确计算操作示例
2018/06/19 Javascript
对Vue2 自定义全局指令Vue.directive和指令的生命周期介绍
2018/08/30 Javascript
详解Webpack loader 之 file-loader
2018/11/07 Javascript
Vue.js特性Scoped Slots的浅析
2019/02/20 Javascript
在JavaScript中实现链式调用的实现
2019/12/24 Javascript
vue-drawer-layout实现手势滑出菜单栏
2020/11/19 Vue.js
全面了解python中的类,对象,方法,属性
2016/09/11 Python
django如何自己创建一个中间件
2019/07/24 Python
python爬虫爬取监控教务系统的思路详解
2020/01/08 Python
基于Python pyecharts实现多种图例代码解析
2020/08/10 Python
如何在windows下安装配置python工具Ulipad
2020/10/27 Python
联谊会主持词
2014/03/26 职场文书
爱情保证书大全
2014/04/29 职场文书
投标人廉洁自律承诺书
2014/05/26 职场文书
2014公安机关纪律作风整顿思想汇报
2014/09/13 职场文书
团日活动总结格式
2015/05/11 职场文书
退税申请报告怎么写
2015/05/18 职场文书
【HBU】数据库第四周 单表查询
2021/04/05 SQL Server
Spring Boot 实现 WebSocket
2022/04/30 Java/Android
mysql 排序失效
2022/05/20 MySQL