vue父子组件传值和非父子组件传值

发表于 | 分类于 |

案例代码

实现如下的一个案例：

简介

该页面是一个父组件Form.vue，添加学生的这个input框部分是一个子组件addStudent.vue，下面的 li 显示学生的这部分是另一个子组件StudentList.vue。我们需要把addStudent.vue的数据传给StudentList.vue，但是他们是非父子组件关系。

因此需要先让 addStudent.vue 把数据传给它的父组件 Form.vue（子组件传值给父组件），然后父组件 Form.vue 再将从子组件 addStudent.vue 获得的数据传给另一个子组件 StudentList.vue（父组件传值给子组件）。从而间接地实现非父子组件传值。


子组件传值给父组件

通过子组件的一个事件触发一个方法，在 addStudent.vue 中是 addStu() 方法，this.$emit("add", this.name); 子组件向父组件派发一个方法，子组件将自身的数据作为参数向父组件传值，在另一头父组件 Form.vue 中引用的 add-student 标签里需要监听 “add” 事件，触发一个自身定义的方法 addFunc()，在这个方法内部实现获取数据并保存。


父组件传值给子组件

父组件中引用的 student-list 标签绑定一个属性，如下：

1
<student-list :student="studentList"></student-list>

其中的 studentList 就是这个父组件自身的数据。而另一方面，子组件 StudentList.vue 中，需要有 props属性来接受父组件传来的数据：

1
2
3
4
5
6
7
//   props: ["student"]  //简易写法
props: {
  student: {
    type: Array,
    default: ""
  }
}

之后就拿着 props 中的数据进行数据渲染即可。


父组件Form.vue

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
<template>
  <div class="form">
    <h3>我是addStudent组件和StudentList组件的父组件</h3>

    <add-student @add="addFunc"></add-student>
    <hr />
    <student-list :student="studentList"></student-list>
  </div>
</template>

<script>
import StudentList from "./StudentList";
import addStudent from "./addStudent";
export default {
  data() {
    return {
      studentList: []
    };
  },
  methods: {
    addFunc(param) {
      console.log(param);
      this.studentList.push(param);
      //   console.log(this.studentList);
    }
  },
  components: {
    StudentList,
    addStudent
  }
};
</script>

<style scoped>
</style>


子组件addStudent.vue

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
<template>
  <div class="addStudent">
    添加学生：
    <input type="text" v-model="name" />
    <button @click="addStu">添加</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      name: ""
    };
  },
  methods: {
    addStu() {
      this.$emit("add", this.name); //子组件向父组件派发一个方法，子组件向父组件传值
      //注意这个this.$emit的this不能没写
    }
  }
};
</script>   

<style scoped>
</style>


子组件StudentList.vue

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
<template>
  <div class="StudentList">
    学生列表：
    <ul>
      <li v-for="(item,index) in student" :key="index+item">{{item}}</li>
    </ul>
  </div>
</template>

<script>
export default {
  data() {
    return {};
  },
  //   props: ["student"]  //简易写法
  props: {
    student: {
      type: Array,
      default: ""
    }
  }
};
</script>

<style scoped>
</style>


这种子组件比较少的还好说，如果是很多个子组件公用一个公共数据，这样的非父子组件传值方式就比较麻烦。可以采用Vuex。