vue组件

什么是组件： 组件的出现，就是为了拆分Vue实例的代码量的，能够让我们以不同的组件，来划分不同的功能模块，将来我们需要什么样的功能，就可以去调用对应的组件即可。

组件化和模块化的不同：

1. 模块化：是从代码逻辑的角度进行划分的；方便代码分层开发，保证每个功能模块的职能单一
2. 组件化：是从UI界面的角度进行划分的；前端的组件化，方便UI组件的重用

说明白点，比如我们很多页面都有一个弹框 表格加图表 组成的块，那么我们就可以将这个块，单拿出来形成一个组件，在我们想使用的时候，直接调用这个组件就可以了，不需要在重新写一遍相同的代码。同时我们可以给这个组件定义上 数据和方法 应对我们调用时的不同需求。

全局组件定义的例子

这些只是简单的例子，组件没有很大

// 方式一
var p1=Vue.extend({
    template:'<h1 style="color: red;">方式一</h1>'
})
Vue.component('p1',p1)
// 方式二
Vue.component('p2',{template:'<h1 style="color: green;">方式二</h1>'})
// 方式三
// html 
<script type="x-teplate" id="p3">
   <h1 style='color: yellow'>方式三</h1>
</script>
// vue
Vue.component('p3',{template:'#p3'})
// 方式四
// html
<template id="p4">
    <h1 style="color: blue;">
        方式四
    </h1>
</template>
// vue
Vue.component('p4',{template:'#p4'})


// app中
<div id='app'>
    <p1></p1>
    <p2></p2>
    <p3></p3>
    <p4></p4>
</div>
// vue实例
const vm = new Vue({
    el: '#app',
    data: {},
    methods: {}
})

使用components属性定义局部子组件

父组件

<template>
  <div id="app">
    <div>这是父组件</div>
    <home msg="这是父组件的参数" />
  </div>
</template>

<script>
import home from '@/views/home/index'  // 引用组件的路径

export default {
  name: 'App',
  components: { // 注册
    home
  }
}
</script>

子组件

<template>
  <div style="background-color: crimson">{{ msg }}</div>
</template>

<script>
export default {
  name: 'Index',
  props: {
    msg: String
  }
}
</script>

 使用component标签调用组件

通过 is 切换当前展示的组件

<template>
  <div id="app">
    <div>这是父组件</div>
    <button @click="flag=!flag">点击切换组件</button>
    <component :is="flag?'home':'my'"
               msg="这是父组件的参数"
    />
  </div>
</template>

<script>
import home from '@/views/home/index'
import my from '@/views/my/index'

export default {
  name: 'App',
  components: { // 引用组件
    home, my
  },
  data() {
    return {
      flag: true // 定义flag控制组件
    }
  }
}
</script>

两个子组件相同代码同上一个子组件就是颜色不一样，不展示了直接看效果