| commit | author | age | ||
| bf6fbe | 1 | // 子组件childA |
| L | 2 | |
| 3 | <template> | |
| 4 | <div id="childA"> | |
| 5 | <h1>我是A组件</h1> | |
| 6 | <button @click="transform">点我让B组件接收到数据</button> | |
| 7 | <p>因为你点了B，所以我的信息发生了变化：{{BMessage}}</p> | |
| 8 | </div> | |
| 9 | </template> | |
| 10 | ||
| 11 | <script> | |
| 12 | export default { | |
| 13 | data() { | |
| 14 | return { | |
| 15 | AMessage: 'Hello，B组件，我是A组件' | |
| 16 | } | |
| 17 | }, | |
| 18 | computed: { | |
| 19 | BMessage() { | |
| 20 | // 这里存储从store里获取的B组件的数据 | |
| 21 | return this.$store.state.BMsg | |
| 22 | } | |
| 23 | }, | |
| 24 | methods: { | |
| 25 | transform() { | |
| 26 | // 触发receiveAMsg，将A组件的数据存放到store里去 | |
| 27 | this.$store.commit('receiveAMsg', { | |
| 28 | AMsg: this.AMessage | |
| 29 | }) | |
| 30 | } | |
| 31 | } | |
| 32 | } | |
| 33 | </script> | |
