一、父组件向子组件传值

1.父组件.vue

// 父组件中 <template>     <div>         <Child ref="child" :title="value"/>     </div> </template>      <script> export default {     data() {     	return {     		value: 'hello world!'     	}     } } </script> 

2.子组件.vue

// 父组件中 <template>     <div>        <span>{{title}}</span>         </div> </template>      <script> export default {   props: {     title: {       	type: String,       	default: ''     }   } } </script> 

//title值为’hello world!

二、兄弟组件间传值还可以通过中间件Bus

$emit 传值

$on 接收

$off 删除传输事件

1.A组件.js

this.$bus.$emit("flag",true) 

2.B组件.js

mounted() {     this.$bus.$off('flag')     this.$bus.$on('flag', data=> {       this.flag= data     })   } 

三、子组件向父组件传值

1.父组件.js

<template>     <div>         <Child ref="child" @getTitle="getTitle"/>     </div> </template>   <script> import Child from './components/Child' export default {   components: {   	Child    },   data() {     return {     }   },   method:{   	getTitle(data){ 		console.log(data) 	}   } } </script> 

打印结果为 hello xuliting

2.子组件.js

<template>     <div>        <span>{{title}}</span>      </div> </template>      <script> export default {   data() {     return {     title: 'hello xuliting'     }   },   mounted(){     this.getFun()   },   method:{     getFun(){      this.$emit("getTiltle",this.title)     }   } } </script>  

总结：组件间也可以通过传递方法从而解决。例如父组件为A，子组件有B和C。

父组件A调用子组件B的方法定义为aFun，把aFun传递给子组件C即可
这是在父组件中的组件C进行方法传递

<C :a-fun="aFun" /> 

引用的则是在组件C，通过props

props: {     aFun: {       type: Function,       default: () => function() {}     }   }