Vue的三种常用传值方式、父传子、子传父、非父子组件传值

Vue常用的三种传值方式有：
1、父传子
2、子传父
3、非父子传值

父子组件的关系可以总结为 prop 向下传递，事件向上传递。父组件通过 prop 给子组件下发数据，子组件通过事件给父组件发送消息，如下图所示：

1、 父组件向子组件进行传值

 <div>
    父组件:
    <input type="text" v-model="name">
    <br>
    <br>
    <!-- 引入子组件 -->
    <child :inputName="name"></child>
  </div>
</template>
<script>
  import child from './child'
  export default {
    components: {
      child
    },
    data () {
      return {
        name: ''
      }
    }
  }
</script>

子组件

<template>
  <div>
    子组件:
    <span>{
  {inputName}}</span>
  </div>
</template>
<script>
  export default {
    // 接受父组