【Vue】需求: 多组件共享数据

一、需求

目标：基于脚手架创建项目，构建 vuex 多组件数据共享环境

结果是三个组件共享一份数据:

• 任意一个组件都可以修改数据
  
• 三个组件的数据是同步的
  

---

二、创建项目

1.创建项目

1. vue create vuex-demo

复制代码

  由于现在是在学基础语法，为了目次的办理，先不勾上，但是以后做项目标时候，这两个都是必要勾选上的
  

  

---

三、创建组件

2.创建三个组件, 目次如下

1. |-components
2. |--Son1.vue
3. |--Son2.vue
4. |-App.vue

复制代码

3.源代码如下
App.vue在入口组件中引入 Son1 和 Son2 这两个子组件

1. <template>
2.   <div id="app">
3.     <h1>根组件</h1>
4.     <input type="text">
5.     <Son1></Son1>
6.     <hr>
7.     <Son2></Son2>
8.   </div>
9. </template>
11. <script>
12. import Son1 from './components/Son1.vue'
13. import Son2 from './components/Son2.vue'
15. export default {
16.   name: 'app',
17.   data: function () {
18.     return {
20.     }
21.   },
22.   components: {
23.     Son1,
24.     Son2
25.   }
26. }
27. </script>
29. <style>
30. #app {
31.   width: 600px;
32.   margin: 20px auto;
33.   border: 3px solid #ccc;
34.   border-radius: 3px;
35.   padding: 10px;
36. }
37. </style>

复制代码

main.js

1. import Vue from 'vue'
2. import App from './App.vue'
4. Vue.config.productionTip = false
6. new Vue({
7.   render: h => h(App)
8. }).$mount('#app')

复制代码

Son1.vue

1. <template>
2.   <div class="box">
3.     <h2>Son1 子组件</h2>
4.     从vuex中获取的值: <label></label>
5.     <br>
6.     <button>值 + 1</button>
7.   </div>
8. </template>
10. <script>
11. export default {
12.   name: 'Son1Com'
13. }
14. </script>
16. <style lang="css" scoped>
17. .box{
18.   border: 3px solid #ccc;
19.   width: 400px;
20.   padding: 10px;
21.   margin: 20px;
22. }
23. h2 {
24.   margin-top: 10px;
25. }
26. </style>

复制代码

Son2.vue

1. <template>
2.   <div class="box">
3.     <h2>Son2 子组件</h2>
4.     从vuex中获取的值:<label></label>
5.     <br />
6.     <button>值 - 1</button>
7.   </div>
8. </template>
10. <script>
11. export default {
12.   name: 'Son2Com'
13. }
14. </script>
16. <style lang="css" scoped>
17. .box {
18.   border: 3px solid #ccc;
19.   width: 400px;
20.   padding: 10px;
21.   margin: 20px;
22. }
23. h2 {
24.   margin-top: 10px;
25. }
26. </style>

复制代码

免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。

继续阅读请点击广告