vue进阶：vuex（数据池）

非父子组件传值
vuex

一、非父子组件传值

vue进阶：vuex（数据池）

基于父子组件通信与传值实现非父子组件传值的示例关键代码：

 1 <template>
 2     <div>
 3         <!-- 学员展示  -->
 4         <add-student @add="add"></add-student> <!--监听子组件自定义事件add，触发自身add事件-->
 5         <student-list :student-list="studentList"></student-list> <!---基于v-bind建立数据通道-->
 6     </div>
 7 
 8 </template>
 9 
10 <script>
11 import AddStudent from '@/components/student/AddStudent'
12 import StudentList from '@/components/student/StudentList'
13 
14 export default {
15     components:{
16         AddStudent,
17         StudentList
18     },
19     data(){
20         return {
21             studentList:[]
22         }
23     },
24     methods:{
25         add(name){ //调用由addStudent触发的add事件，实现向父级data中添加数据
26             this.studentList.push(name);
27         }
28     }
29 }
30 </script>

父组件Student.vue关键代码