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

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

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

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

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

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

// 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'],
};

// ProfilePage
<template>
 <div class="profile-page">
 <div class="avatar">
  <img src="/UploadFiles/2021-04-02/user.profilePicture">

我们的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="/UploadFiles/2021-04-02/user.profilePicture">

现在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>



以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。