父传子

父组件给子组件传递自定义属性，子组件通过props来接收

父组件代码

<son :fa-msg="msg"></son> <!-- 子组件绑定faMsg变量,注意驼峰-->
import son from './Son' //引入子组件
data () {return {msg: '父组件',}
},
components:{son},

子组件代码

<p>子组件接收到内容：{{ faMsg }}</p>
props:['faMsg'],

子传父

父组件给子组件传递自定义事件，子组件通过this.$emit来接收,$emit有两个参数
第一个是自定义事件的名称，第二个是要传递的参数

父组件代码

<son @transfer="getUser"></son> 
<!-- 监听子组件触发的transfer事件,然后调用getUser方法 -->
import son from './Son'
data () {return {msg: '父组件',username:'',}
},components:{son},methods:{getUser(msg){this.username= msg}}}

子组件代码

<input type="text" v-model="user" @change="setUser">
data(){return {user:'子传父的内容'}
},methods:{setUser:function(){this.$emit('transfer',this.user)//触发transfer方法，this.user 为向父组件传递的数据}}

兄弟组件传值

发送
$bus.$emit(“aMsg”, ‘来自A页面的消息’);

<!-- A.vue -->
<template><button @click="sendMsg()">-</button>
</template><script> 
//import $bus from "../bus.js";
export default {methods: {sendMsg() {$bus.$emit("aMsg", '来自A页面的消息');}}
}; 
</script>

接收
$bus.$on(“事件名”,callback)

<!-- IncrementCount.vue -->
<template><p>{{msg}}</p>
</template><script> 
//import $bus  from "../bus.js";
export default {data(){return {msg: ''}},mounted() {$bus.$on("aMsg", (msg) => {// A发送来的消息this.msg = msg;});}
};
</script>