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

// ContactInfo <template> <div> <div> 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> <div> <img src="https://www.jb51.net/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> <div> <img src="https://www.jb51.net/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>