理解vue中的父组件，子组件

比如说要实现一个饼状图，

我们需要完成的工作是：

1.子组件负责饼状图所有功能的实现

2.父组件负责使用这个功能就可以了

可以看出，这个饼状图的实现主要是在子组件中，那我们先从子组件说起:

子组件的工作：

完成饼状图的布局，实现饼状图该有的功能，就相当于一个被封装好的函数，什么都有了，就差给它传入实参调用就可以了

props方法拿到父组件给的数据，并用这些数据真正的实现某些功能（拿到了实参，并使用实参）

<template>
 <div></div>
<template>
<script>
export default {
// 使用props方法从父组件拿到数据
　　props: {
　　　　childNeed: {
　　　　　　type: String,
　　　　　　dafault: '父组件未传数据时的默认值'
　　　　}
　　}
　　data() {
　　return {
　　 realData: '子组件在自己页面要使用的数据'
　　}
　},
　created() {
　　// 页面刚加载进来时，将从父组件拿到的数据赋给子组件中自己定义的数据，避免从父组件直接拿到数据后子组件进行操作导致出错
　　this.realData = thia.childNeed
　　console.log(this.realData， '子组件可真正用于页面操作的数据')
　　}
}
</script>

 

父组件的工作：

调用这个子组件，并将子组件所用的数据传给它，就相当于调用了封装好的函数，并且给它传入了实参，这样这个组件就可以被展示在页面上了

调用子组件，并传递数据给子组件（调用封装好的函数，并将实参传入）

<template>
 <child :childNeed='parentGive'></child>
<template>
<script>
// 引入子组件
import child from './child.vue'
export default {
　　components: {child},
　　data() {
　　return {
　　parentGive: '父组件将要传给子组件的数据'
}
}
}
</script>

上述这样就使用props方法成功将父组件给予的数据传递给了子组件，子组件就可以使用这些数据了。

但是还有另一种情况就是父组件把数据给予了子组件，但是子组件不仅使用了这些数据，并且在某种情况下改变了这些数据，它就需要告诉父组件，我改变了你给我的这些数据，你在页面上不能显示原来的，得显示我改变后的这些新数据，这种情况下该怎么办呢？

使用什么方法把子组件这些新的数据告知父组件呢？这里就介绍下emit()方法的使用：

<template>
 <div></div>
<template>
<script>
export default {
// 使用props方法从父组件拿到数据
　　props: {
　　　　childNeed: {
　　　　　　type: String,
　　　　　　dafault: '父组件未传数据时的默认值'
　　　　}
　　}
　　data() {
　　return {
　　 realData: '子组件在自己页面要使用的数据'
　　}
　},
　created() {
　　// 页面刚加载进来时，将从父组件拿到的数据赋给子组件中自己定义的数据，避免从父组件直接拿到数据后子组件进行操作导致出错
　　this.realData = thia.childNeed
　　console.log(this.realData， '子组件可真正用于页面操作的数据')
　　this.realData = '11111' // 子组件拿到了真正的数据并改变了这个数据
   // 使用emit方法将改变后的数据再传递给父组件，父组件在页面上更新数据
　　this.$emit('noticParent', { noticData: this.realData})

　　}
}
</script>

父组件拿到更新后的数据，并重新渲染

<template>
 <child :childNeed='parentGive' @noticParent="parentReceive"></child>
<template>
<script>
// 引入子组件
import child from './child.vue'
export default {
　　components: {child},
　　data() {
　　return {
　　parentGive: '父组件将要传给子组件的数据'
}
},
methods: {
　　parentReceive(msg) {
　　console.log(msg.noticData, '从子组件收到的数据')
　　}
}
}
</script>

这样就解决了子组件数据发生变化，父组件重新渲染的问题。