在复杂场景中,可以使用专门的状态管理模式 Vuex。
简单的场景中,可以使用一个父组件、若干个子组件来构建应用,这样通信会比使用vuex简单些:
1. 子组件的 props 选项可以接收父组件传递过来的数据,这是一个单向数据流的过程,子组件对props改动,不会影响父组件。
2. 子组件也可以通过自定义事件向父组件传递数据。父组件监听自定义事件,子组件使用 $emit 触发这个事件。
父组件:
1. 在父组件hello中引入子组件son,并注册在components中;
2. 在父组件hello的模版中,通过自定义标签引入子组件son模版。
3. 通过子组件son模版标签的自定义属性msg传递数据,传递动态数据使用 :msg (即:v-bind:msg),否则直接使用msg即可。
4. 在子组件模版标签中监听自定义事件receive(@receive 即 v-on:receive),监听子组件传递的信息。
1 <template> 2 <div class="hello"> 3 <son :msg="msg" @receive="receive"></son> 4 <p>{{ answer }}</p> 5 </div> 6 </template> 7 8 <script> 9 import Son from '@/components/Son' 10 export default { 11 name: 'hello', 12 components: { 13 Son 14 }, 15 data () { 16 return { 17 msg:'我是hello模块传递给子模块的信息', 18 answer:'' 19 } 20 }, 21 methods: { 22 receive(answer) { 23 this.answer = answer; 24 } 25 } 26 } 27 </script>
子组件:
为了模拟数据传递过程,在子组件中构建click事件,用于触发子组件对父组件的数据传递。
1. 子组件通过props接收父组件传递的数据msg。可以直接通过模版标签{{ msg }}显示于模版中,也可以通过this.msg获取。
2. 点击回复按钮,调用send方法,通过$emit,触发父组件中的自定义事件receive,将数据answer传递给父组件。
1 <template> 2 <div class="son"> 3 <p>{{ msg }} <button v-on:click="send">回复</button></p> 4 </div> 5 </template> 6 7 <script> 8 export default { 9 name: "son", 10 props: ["msg"], 11 data () { 12 return { 13 answer:"我是Son模块传递给父模块的信息" 14 } 15 }, 16 methods: { 17 send() { 18 this.$emit("receive",this.answer); 19 } 20 } 21 } 22 </script>
还有一种组件通信方式是event bus,可以进行兄弟组件之间数据传递,有时间在分享下。 ^_^