Vue传值方式：父传子、子传父、非父子组件传值

一、父传子

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

父组件：

<template>
  <div>
    <!-- 子组件 -->
    <child :selectName="name"></child>
  </div>
</template>
<script>
  import child from './child'
  export default {
    components: {
      child
    },
    data () {
      return {

      }
    }
  }
</script>

子组件：

<template>
  <div>
    <span>{{selectName}}</span>
  </div>
</template>
<script>
  export default {
    // 接受父组件的值
    props: {
      selectName: String,
      required: true
    }
  }
</script>

二、 子传父

<template>
  <div>
    子组件:
    <span>{{childValue}}</span>
    <!-- 定义一个子组件传值的方法 -->
    <input type="button" value="点击触发" @click="childClick">
  </div>
</template>
<script>
  export default {
    data () {
      return {
        childValue: '我是子组件的数据'
      }
    },
    methods: {
      childClick () {
        // childByValue是在父组件on监听的方法
        // 第二个参数this.childValue是需要传的值
        this.$emit('childByValue', this.childValue)
      }
    }
  }
</script>

<template>
  <div>
    父组件:
    <span>{{name}}</span>
    <br>
    <br>
    <!-- 引入子组件 定义一个on的方法监听子组件的状态-->
    <child v-on:childByValue="childByValue"></child>
  </div>
</template>
<script>
  import child from './child'
  export default {
    components: {
      child
    },
    data () {
      return {
        name: ''
      }
    },
    methods: {
      childByValue: function (val) {
        // val就是子组件传过来的值
        this.name = val
      }
    }
  }
</script>

三、非父子组件

使用公共的公共实例文件bus.js，作为中间仓库来传值

组件1：

<template>
  <div>
    <span>{{value1}}</span>
    <input type="button" value="点击触发" @click="elementByValue">
  </div>
</template>
<script>
  import bus from './bus.js'
  export default {
    data () {
      return {
        value1: 4
      }
    },
    methods: {
      elementByValue: function () {
        bus.$emit('val', this.value1)
      }
    }
  }
</script>

组件2:

<template>
  <div><input type="button" value="点击触发" @click="getValue">
    <span>{{name}}</span>
  </div>
</template>
<script>
  import bus from './bus.js'
  export default {
    data () {
      return {
        name: 0
      }
    },
    mounted: function () {
      // 用$on事件来接收参数
      bus.$on('val', (value2) => {
        this.name = value2
      })
    },
    methods: {
      getValue: function () {
        this.name++
      }
    }
  }
</script>