1、父組件向子組件進行傳值：

父組件：

  <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.子組件向父組件傳值

子組件：

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

3.非父子組件進行傳值。（非父子組件之間傳值，需要定義個公共的公共實例文件bus.js，作為中間倉庫來傳值，不然路由組件之間達不到傳值的效果。）

公共bus.js

//bus.jsimport 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>