Vue components(组件)

组件基础
组件注册
Prop
Vue生命周期

父子组件就是在一个vue文件中引入另一个vue文件，被引入vue文件就是子组件，引入vue文件的vue文件就是父组件。

1、vue组件的功能
● 能够把页面抽象成多个相对独立的模块
● 实现代码重用，提高开发效率和代码质量，使得代码易于维护

2、Vue组件封装过程
● 首先，使用Vue.extend()创建一个组件
● 然后，使用Vue.component()方法注册组件
● 接着，如果子组件需要数据，可以在props中接受定义
● 最后，子组件修改好数据之后，想把数据传递给父组件，可以使用emit()方法

3、组件使用流程详细介绍
使用 kebab-case

Vue.component('my-component-name', { /* ... */ })

当使用 kebab-case (短横线分隔命名) 定义一个组件时，你也必须在引用这个自定义元素时使用 kebab-case，例如 <my-component-name>。

使用 PascalCase

Vue.component('MyComponentName', { /* ... */ })

当使用 PascalCase (首字母大写命名) 定义一个组件时，你在引用这个自定义元素时两种命名法都可以使用。也就是说 <my-component-name> 和 <MyComponentName> 都是可接受的。注意，尽管如此，直接在 DOM (即非字符串的模板) 中使用时只有 kebab-case 是有效的。
*
*
*
4、注册组件【全局注册】
全局注册
*
*
*
5、注册组件【局部注册】
局部注册
*
*
6、Vue 组件
Vue Loader 是一个 webpack 的 loader，它允许你以一种名为 单文件组件 (SFCs) 的格式撰写 Vue 组件：

<template>
  <div class="example">{{ msg }}</div>
</template>

<script>
export default {
  data () {
    return {
      msg: 'Hello world!'
    }
  }
}
</script>

<style>
.example {
  color: red;
}
</style>

*
*
*
7、调用组件
*
*
8、父组件调用向子组件传值【props】
*
*
*
9、子组件向父组件传值【$emit】
*
*
*
10、vue element admin 自定义组件
父组件

<template>
  <div class="patient-panel">
    <TimeLine />
  </div>
  <div>
    <h1>父组件</h1>
    <router-view v-bind:fData="data1" :fMessage="data2"></router-view>
  </div>
</template>

<script>
import TimeLine from '@/components/TimeLine'

export default {
  name: 'test',
  components: {
    TimeLine
  },
  props: {},
  return {
    data1: '父组件数据data1',
    data2: '父组件数据data2',
  }
}
</script>

子组件

<template>
  <div>
    <h1>子组件</h1>
    <p>下面是父组件传过来的数据</p>
    <p>第一个数据：{{fData}}</p>
    <p>第二个数据：{{fMessage}}</p>
  </div>
</template>
  
<script>
export default {
  props: ['fData', 'fMessage'],
  data () {
    return {
    };
  }
}
</script>

*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*