1、画个图（简单来说一下）
- 父传子：父（数据）-》属性-》子-》
prop属性-》获得数据 - 子传父：子（数据）-》
$emit属性-》自定义事件=》函数=》父获得数据 - 同传：兄弟（改变数据）-》中间值改变-》姐妹（数据跟改变），反过来也一样
- 是不是很简单O(∩_∩)O~~
2、父传子
| 父传子 | 步骤 |
| 第一步 | 父级向子级传递数据，使用属性传递 |
| 第二步 | 子级获取父级传来的数据，使用props属性 |
第一步（App.vue）： <child :msg="message"></child>，子级绑定父级属性值
<template> <div id="app"> <!-- 1、父级向子级传递数据，使用属性传递 --> <child :msg="message"></child> </div> </template> <script> // 引入组件 import Child from "./components/Child.vue"; import Brother from "./components/Brother.vue"; export default { name: "App", // 注册组件 components: { Child, Brother }, data() { return { message: "App父级的数据", }; }, }; </script> <style></style>
第二步（Child.vue）： export default{props:["msg"]}，子级通过prop属性获取父级属性值
<template> <div> <h1>{{ msg }}</h1> </div> </template> <script> export default{ // 1、子级接收父级的数据 props:["msg"] } </script>
3、子传父
- （Child.vue）：
this.$emit("myevent", this.childData);把子级数据传给父级的自定义事件myevent
<template> <div> <h1>{{ msg }}</h1> <button @click="sendData">子级向父级传递数据</button> </div> </template> <script> export default { // 1、子级接收父级的数据 props: ["msg"], data() { return { childData: "Child的数据", }; }, methods: { sendData() { // 2、子级向父级传递数据，使用自定义事件 this.$emit("myevent", this.childData); }, }, }; </script>
- （App.vue）：
@myevent="changeData"，父级自定义事件绑定changeData函数，函数获取子级传过来的数据childData，最后一步渲染
<template> <div id="app"> <!-- 1、父级向子级传递数据，使用属性传递:msg="message" --> <!-- 2、父级自定义事件：@myevent="changeData" --> <child :msg="message" @myevent="changeData"></child> <h1>{{ childData }}</h1> </div> </template> <script> // 引入组件 import Child from "./components/Child.vue"; import Brother from "./components/Brother.vue"; export default { name: "App", // 注册组件 components: { Child, Brother }, data() { return { message: "App的数据", childData: "", }; }, methods: { changeData(childData) { this.childData = childData; }, }, }; </script> <style></style>
4、同级传值
- （Brother.vue）：获取store的值并渲染，点击改变数据按钮时，store的值会改变，Sister.vue的值也会跟着改变，实现同级传值效果
<template> <div> <h1>brother</h1> <button @click="changeData">改变数据</button> <p>{{ state.message }}</p> </div> </template> <script> import store from "../store"; export default { data() { return { state: store.state, }; }, methods: { changeData() { store.setStateMessage("brother的数据"); }, }, }; </script>
- （Sister.vue）：获取store的值并渲染，点击改变数据按钮时，store的值会改变，Brother.vue的值也会跟着改变，实现同级传值效果
<template> <div> <h1>sister</h1> <button @click="changeData">改变数据</button> <p>{{ state.message }}</p> </div> </template> <script> import store from "../store"; export default { data() { return { state: store.state, }; }, methods: { changeData() { store.setStateMessage("sister的数据"); }, }, }; </script>
（store.js）：定义属性和方法
export default { // 状态 state: { message: "Hello world!" }, setStateMessage(str) { this.state.message = str; } }
5、总结
- 系统组件化，一方面降低了功能的耦合性（功能可以分开创建），但是一方面也提升了数据传输难度（父传子、子传父、同级互传），自己看着办吧~
6、实例（购物车）太累了，不想写了，直接放代码吧~
