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