在vue-cli3项目./view目录下，新建两个组件.vue
父组件 CFather.vue

<template>
  <child-one></child-one>
</template>
<script>
import ChildOne from '@/views/ChildOne.vue'
export default {
  name:'CFather',
  components: {
    ChildOne
  }
}
</script>

子组件 ChildOne.vue

<template>
  <div>
    <div>我是子组件，我要被父组件使用</div>
  </div>
</template>
<script>
export default {
  name: 'child-one'
  }
}
</script>

配置路由，当访问父组件CFather.vue时，会将子组件显示在对应位置
注意：子组件中name为child-one，父组件中使用标签应该也是<child-one></child-one>

1.父子组件传值

（1）父传子

父组件CFather.vue传递对象assets

<template>
  <child-one :give="assets"></child-one>
</template>
<script>
import ChildOne from '@/views/ChildOne.vue'
export default {
  name:'CFather',
  components: {
    ChildOne
  },
  data() {
    return {
      assets: {
        money: 1000000,
        car: 5,
        house: 10
      }
    }
  }
}
</script>

子组件ChildOne.vue使用props属性

<template>
  <div>
    <div>我是子组件，我要被父组件使用</div>
    <div>我父亲给了我：现金{{give.money}}</div>
  </div>
</template>
<script>
export default {
  name: 'child-one',
  props: {
    give: {
      type: Object
    }
  },
  //props:['give'] 也可这么用
}
</script>

（2）子传父

父组件CFather.vue绑定属性获取

<template>
  <child-one @forFather="buyWhat($event)"></child-one>
</template>
<script>
import ChildOne from '@/views/ChildOne.vue'
export default {
  name:'CFather',
  components: {
    ChildOne
  },
  methods: {
    buyWhat(obj) {
      console.log(obj)
    }
  }
}
</script>

子组件ChildOne.vue使用this.$emit()触发父组件事件

<template>
  <div>
    <div>我是子组件，我要被父组件使用</div>
    <div><button @click="onClick">Send</button></div>
  </div>
</template>
<script>
export default {
  name: 'child-one',
  methods: {
    onClick(){
      this.$emit("forFather",{money:5000000,goods:'cherry'})
    }
  }
}
</script>

2.动态组件 & 异步组件

（1）动态组件

<template>
  <div>
     <component :is="useChild"></component>
    <button @click="onClick">点我换孩子</button>
  </div>
</template>
<script>
import ChildOne from '@/views/ChildOne.vue'
import ChildTwo from '@/views/ChildTwo.vue'
export default {
  name:'CFather',
  components: {
    ChildOne,
    ChildTwo,
  },
  data() {
    return {
      count: 0,
      useChild: 'ChildOne'
    }
  },
  methods: {
    onClick() {
      if(this.count%2 == 0){
        this.useChild = 'ChildTwo'
      }else{
        this.useChild = 'ChildOne'
      }
      this.count++
    }
  }
}
</script>

问题：上面代码，当动态切换ChildOne和ChildTwo时候，会出现下面结果

切换组件结果.png

如此，产生了反复重渲染导致的性能问题
解决方法：

<!-- 失活的组件将会被缓存！-->
<keep-alive>
   <component :is="useChild"></component>
</keep-alive>

此时再看结果：

加上keep-alive结果.png

无论 怎么点击切换按钮，ChildOne和ChildTwo只会创建一次

（2）异步组件

在大型应用中，我们可能需要将应用分割成小一些的代码块，并且只在需要的时候才从服务器加载一个模块。为了简化，Vue 允许你以一个工厂函数的方式定义你的组件，这个工厂函数会异步解析你的组件定义。Vue 只有在这个组件需要被渲染的时候才会触发该工厂函数，且会把结果缓存起来供未来重渲染。

new Vue({
  // ...
  components: {
    'my-component': () => import('./my-async-component')
  }
})