vue组件间的传值方式

作为一个vue的入门者，写此博文用于记录与学习，希望和我一样作为vue小白的可以有所帮助。
vue三种传值类型

1. 父组件向子组件传值
2. 子组件向父组件传值
3. 兄弟组件之间相互传值或者是两个没有关系的组件之间的传值

父组件给子组件传值

父组件parent.vue

<template>
  <div class="hello">
    <p>我是父组件</p>
    <child01 :parentContent="parentValue01"></child01>
  </div>
</template>

<script>
import Child01 from './child01'
export default {
  name: 'parent',
  data () {
    return {
      parentValue01: '我是父组件的数据'
    }
  },
  components: {
    Child01
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
h1, h2 {
  font-weight: normal;
}
ul {
  list-style-type: none;
  padding: 0;
}
li {
  display: inline-block;
  margin: 0 10px;
}
a {
  color: #42b983;
}
</style>

子组件child01.vue

<template>
  <div style="background: #f2f2f2;">
    <p>我是子组件</p>
    <p>{{this.parentContent}}</p>
  </div>
</template>
<script>
export default {
  name: 'child01',
  props: {
    parentContent: {
      default: String
    }
  }
}
</script>

由上图可以看出，在父组件定义的parentValue01变量的值，在子组件中获取到了。
具体获取方法：
在父组件中v-bind:属性名=“父组件内变量名”

在子组件中接收父组件的值，props: [‘属性名’] 或者 props: {属性名:{type:数据类型，default:默认值}}