Vue2.0的几种常用传值方式、父传子、子传父、非父子组件传值

Vue2.0 传值方式：

在Vue的框架开发的项目过程中，经常会用到组件来管理不同的功能，有一些公共的组件会被提取出来。这时必然会产生一些疑问和需求？比如一个组件调用另一个组件作为自己的子组件，那么我们如何进行给子组件进行传值呢？如果是电商网站系统的开发，还会涉及到购物车的选项，这时候就会涉及到非父子组件传值的情况。当然你也可以用Vuex状态管理工具来实现，这部分我们后续会单独介绍。

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

 

接下来，我们通过实例来看可能会更明白一些：

1. 父组件向子组件进行传值props

 父组件：

<template>
  <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 {
      // 接受父组件的值
      props: {
        inputName: String,
        required: true
      }
    }
  </script>
  

  2. 子组件向父组件传值$emit,父组件通过子组件的ref属性获取值

• 

 子组件：

<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 (childValue) {
          // childValue就是子组件传过来的值
          this.name = childValue
        }
      }
    }
  </script>
  

  尽管有 prop 和事件，但是有时仍然需要在 JavaScript 中直接访问子组件。
  为此可以使用 ref 为子组件指定一个引用 ID。例如：

• <div id="parent">
    <user-profile ref="profile"></user-profile>
  </div>
  var parent = new Vue({ el: '#parent' })
  // 访问子组件实例
  var child = parent.$refs.profile
  

  当 ref 和 v-for 一起使用时，获取到的引用会是一个数组，包含和循环数据源对
  应的子组件。
  $refs 只在组件渲染完成后才填充，并且它是非响应式的。它仅仅是一个直接
  操作子组件的
  应急方案——应当避免在模板或计算属性中使用 $refs。

  具体使用方法：

  父组件

• <template>
    <div id="app">
      {{ a }}
      <button @click="getchild">通过ref得到子组件的值</button>
      <!-- 使用组件 -->
      <three ref="mesage"/>
    </div>
  </template>
  <script>
   
   
  import three from './components/three'
   
  export default {
    components:{
      three,
    },
    data(){
      return {
        a:'我是父组件',
      }
    },
    methods:{
      getchild(){
  	   // 通过this.$refs调用
        console.log(this.$refs.mesage.mes)
      }
    }
  }
  </script>
   
   
  

  子组件： 

• <template>
      <div class="three">
          {{mes}}
      </div>
  </template>
   
  <script>
  	export default {
  	  data() {
  	    return {
  	        mes:'666'
  	    };
  	  }
  	};
  </script>
   
   
  

  3. 事件总线 $emit　/ $on

• 非父子组件之间传值，需要定义个公共的公共实例文件bus.js，作为中间仓库来传值，不然路由组件之间达不到传值的效果。这种方法通过一个空的Vue实例作为中央事件总线（事件中心），用它来触发事件和监听事件,巧妙而轻量地实现了任何组件间的通信，包括父子、兄弟、跨级。当我们的项目比较大时，可以选择更好的状态管理解决方案vuex。
• 
  公共bus.js

• //bus.js
  import Vue from 'vue'
  export default new Vue()
  

• 组件A：

• <template>
    <div>
      A组件:
      <span>{{elementValue}}</span>
      <input type="button" value="点击触发" @click="elementByValue">
    </div>
  </template>
  <script>
    // 引入公共的bug，来做为中间传达的工具
    import Bus from './bus.js'
    export default {
      data () {
        return {
          elementValue: 4
        }
      },
      methods: {
        elementByValue: function () {
          Bus.$emit('val', this.elementValue)
        }
      }
    }
  </script>
  

• 组件B：

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