兄弟通信：
1.bus事件总线（用得较少，用于小项目）
原理：从子到父，再从父到子，实现兄弟通讯
2.vuex（用得较多，用于大项目）
父子通信
实现方法
父传子：
父：通过自定义属性将所要传入的值写入属性内
子：通过props进行接收
即可使用
子传父：
父：通过自定义事件
例如：@事件名=“函数方法”
子：通过父传过来的自定义事件进行回调
利用this.$emit('事件名',值or数据)进行回调
调用事件后，将使用事件里的方法，此时就可以通过方法接收子的值
实现代码：
父组件
<template>
<div>123
<!-- <Form title="123"></Form> -->
<!-- 自定义属性titles,将值title传入子组件 -->
<!-- 自定义事件aaa 由子组件触发函数getUsername -->
<Form :titles="title" @aaa="getUsername"></Form>
</div>
</template>
<script>
import Form from "./components/Form";
export default {
data() {
return {
title: "添加电影"
};
},
methods: {
//接受子组件的数据data 并执行函数
getUsername(data) {
console.log(data);
}
},
//注册组件(全局组件不用注册)
components: {
Form
}
};
</script>
子组件
<!-- 子组件 -->
<template>
<div>
<!-- 打印属性 -->
<h3>{{titles}}</h3>用户名:
<input type="text" v-model="username">
<!-- 设置一个点击事件 -->
<button @click="submit">获取数据</button>
</div>
</template>
<script>
export default {
data() {
return {
username: ""
};
},
//接受属性titles 通过属性props 父组件向子组件传递,子组件不应该直接修改父组件的属性
props: ["titles"],
methods: {
//点击后执行函数 this.$emit向父组件aaa传递 并带上数据username
submit() {
this.$emit("aaa", this.username);
}
}
};
</script>
